<packt> 


! . = 
bpy- €o ext. selected_obj'” 
ra 0b je ts[one.name].s@ 


7 


) 
E 
\ M l i 


grint("please select exactly < 
(| @ 6 B += - 
„- OPERATOR CLASSES 1 


el 


JavaScript 


from Frontend to Backend 


Learn full stack JavaScript development using 
the MEVN stack with quick and easy steps 


ERIC SARRION 


JavaScript from 
Frontend to Backend 


Learn full stack JavaScript development using the 
MEVN stack with quick and easy steps 


Eric Sarrion 


Packt 


BIRMINGHAM —MUMBAI 


JavaScript from Frontend to Backend 


Copyright © 2022 Packt Publishing 


All rights reserved. No part of this book may be reproduced, stored in a retrieval system, 
or transmitted in any form or by any means, without the prior written permission of the publisher, 
except in the case of brief quotations embedded in critical articles or reviews. 


Every effort has been made in the preparation of this book to ensure the accuracy of the 
information presented. However, the information contained in this book is sold without warranty, 
either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, 
will be held liable for any damages caused or alleged to have been caused directly or indirectly 

by this book. 


Packt Publishing has endeavored to provide trademark information about all of the companies 
and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing 
cannot guarantee the accuracy of this information. 


Associate Group Product Manager: Pavan Ramchandani 
Publishing Product Manager: Jane D’souza 

Senior Editor: Mark D’souza 

Content Development Editor: Debolina Acharyya 
Technical Editor: Shubham Sharma 

Copy Editor: Safis Editing 

Proofreader: Safis Editing 

Indexer: Rekha Nair 

Production Designer: Vijay Kamble 


Marketing Coordinater: Marylou De Mello, Anamika Singh 


First published: July 2022 


Production reference: 1050722 


Published by Packt Publishing Ltd. 
Livery Place 

35 Livery Street 

Birmingham 

B3 2PB, UK. 


ISBN 978-1-80107-031-7 


www.packt.com 


Contributors 


About the author 


Eric Sarrion is a trainer, a developer, and an independent consultant. He has been 
involved in all kinds of IT projects for over 30 years. He is also a long-time author 
in web development technologies and is renowned for the clarity of his explanations 
and examples. 


About the reviewer 


Presently, Kailash Ramanathan works at Uber as a Senior Software Engineer. Since 
2009, he has built several lean and powerful web-based applications using contemporary 
frameworks. Now, he enjoys working with Vue & React. When not at work, he enjoys 
music & a good-natured banter with friends and family. 


First, I thank my parents for their incessant and unconditional support 
for every enterprise I undertake. Second, I thank God for this life & 
surrounding it with beautiful people I know - near and dear. Third, I thank 
my mentors & authors who I have read and learned from. And, to you who 
are reading these words and have chosen to know more and go beyond. 


Gabriel Bieules is an engineer with 18 years of experience in building software 
applications. He worked in various industries like telecommunication, eDiscovery, 
and the web. He got exposed to multiple programming languages, but his expertise 
is mostly around Java and JavaScript. 


Table of Contents 


Preface 


Part 1: JavaScript Syntax 


1 


Exploring the Core Concepts of JavaScript 


Technical requirements 
Types of variables used 
in JavaScript 

Numerical values 

Boolean values 

Character strings 

Arrays 

Objects 


Running a JavaScript program 
Running a JavaScript program 

in a browser 

Running a JavaScript program 

on a Node.js server 


Differences between JavaScript code 
written for the browser and the server 


Declaring variables in JavaScript 


Using the const keyword 
Using the var keyword 
Using the let keyword 
What if we don’t use var 
or let to define a variable? 


4 


NOOO W UI 


What is an uninitialized 
variable worth? 


Writing conditions for 
conditional tests 

Forms of writing instructions 
Expressions used to write conditions 
Nested test suites 


Creating processing loops 
Loops with while() 
Loops with for() 


Using functions 

Function displaying the list of 
the first 10 integers 

Function calculating the sum 
of the first 10 integers 
Function calculating the sum 
of the first N integers 


Summary 


23 


25 
25 
27 
29 


30 
30 
32 


33 


34 


38 


39 


40 


vi Table of Contents 


2 


Exploring the Advanced Concepts of JavaScript 


Technical requirements 
Classes and objects 

Defining a class 

Creating an object by using a class 
Creating an object without 

using a class 

Adding properties to a class 
Adding methods to a class 
Changing an object's property values 
Using the class constructor 
Merging one object with another 


Arrays 
Creating an array 
Accessing array elements 


42 
42 


42 
43 


45 
46 
47 
49 
50 
53 


55 
55 
57 


Adding items to the array 
Deleting array elements 
Filtering elements in an array 


Character strings 

Creating a character string 
Accessing characters in a string 
Modifying a character string 
Using regular expressions 


Multitasking in JavaScript 
Using the setTimeout() function 
Using the setinterval() function 
Using the clearInterval() function 


Using promises 


Part 2: JavaScript on the Client-Side 


3 


Getting Started with Vue.js 


Technical requirements 
Using Vue.js in an HTML page 
Creating our first Vue.js 
application 

Using reactivity 

Creating our first component 


Inserting a component 
in the application file 
Inserting a component 
from an external file 


Adding methods 
in components 


96 
96 


97 
99 
103 


104 


107 


110 


Defining methods 
in the methods section 


Defining computed properties 
in the computed section 


Using attributes 

in components 

Using directives 

The v-if and v-else directives 
The v-show directive 

The v-for directive 

The v-model directive 


Summary 


64 
66 
69 


72 
72 
75 
77 
78 


82 
83 
86 
87 


89 


111 


112 


114 
117 
118 
120 
120 
123 


126 


Table of Contents vii 


4 


Advanced Concepts of Vue.js 


Technical requirements 128 
Managing events 128 
Using the $event parameter 130 
Checking that the entered 


value is less than 100 130 
Allowing only digits to be entered 132 
Assembling components 134 
Using $emit() to communicate 

with a parent component 136 
Using props to communicate 

with children 140 
Using visual effects 143 


5 


Managing a List with Vue.js 


Technical requirements 166 
Displaying application screens 166 
Splitting the application 


into components 169 
Adding an element to the list 173 
Using the <Element> component 174 
Changing the appearance 

of the list using CSS code 177 


When the element appears 
When the element disappears 


Using a name for the effect 
Producing an effect 

on several elements 
Examples of commonly 
used effects 

The shrink effect 

The opacity effect 

The move-down effect 


Summary 


Removing an element 
from the list 

Modifying an element 

in the list 

Transforming the <span> 
element into an <input> element 
Exiting from the input field 
Giving focus to the input field 


Summary 


144 
151 


154 


156 


157 
157 
159 
160 


163 


178 


183 


183 
185 
188 


191 


viii Table of Contents 


Part 3: JavaScript on the Server-Side 


6 


Creating and Using Node.js Modules 


Technical requirements 196 
Creating and using 

our own modules 196 
Creating a module 196 
Using the node_modules directory 198 
Using the package.json file 199 


Adding functionalities to the module 201 


Using internal 
Node.js modules 206 


7 


Using Express with Node.js 


Technical requirements 216 
Using the Node.js http module 216 
Installing the Express module 219 


The MVC pattern used 
by Express 222 


Using routes with Express 223 
The initial content of the app.js file 223 


8 


Using MongoDB with Node.js 


Technical requirements 238 
Installing MongoDB 238 
Using the mongo utility 239 
Installing the mongoose module 240 


Connecting to the 
MongoDB database 241 


Reading the contents of a file 
Displaying file contents as strings 
Using non-blocking file reading 


Using downloaded 
modules with npm 
Using the npm command 


Using a downloaded 
module with npm 


Summary 


Different types of routes possible 
Analyzing routes defined 

in the app.js file 

Adding a new route 

in the app.js file 


Displaying views with Express 


Summary 


Creating documents 

in MongoDB 

Describing document structure 
using schemas 

and models 

Creating the document 


206 
207 
208 


210 
210 


211 


214 


225 


226 


229 


231 
235 


243 


243 
245 


Table of Contents ix 


Searching for documents 
in MongoDB 

Writing search conditions 
Retrieving and displaying 

the results 


9 


Integrating Vue.js with Node.js 


Technical requirements 
Displaying application screens 
Building the app with Express 
MongoDB database structure 
Installing the Axios library 
Inserting a new element 

in the list 

Replacing the text and index 
attributes with the element attribute 


Description of the Axios library 
for communicating between 
the client and the server 


Using Axios with a POST 

type request (client side) 
POST type request processing 
(server side) 


Verifying the correct operation 
of the insertion in the database 


Displaying list elements 


Index 


251 
252 


253 


264 
264 
272 
274 
277 


280 


280 


285 


286 


288 


291 
292 


Other Books You May Enjoy 


Updating documents 
in MongoDB 
Deleting documents 
in MongoDB 


Summary 


Using Axios with a GET 

type request (client side) 
GET type request processing 
(server side) 


Modifying an element 
in the list 

Using Axios with a PUT 

type request (client side) 
PUT type request processing 
(server side) 


Removing an element 
from the list 

Using Axios with a DELETE 
type request (client side) 
DELETE type request 
processing (server side) 


Summary 
Thanks 


258 


260 
262 


292 


294 


297 


297 


300 


302 


302 


305 


308 
308 


Preface 


JavaScript is the most widely used programming language in the world. It has numerous 
libraries and modules and a dizzying array of need-to-know topics. Picking a starting 
point can be difficult. This concise, practical guide will get you up to speed in next to 

no time. 


Who this book is for 


This book is for JavaScript developers looking to strengthen their core JavaScript concepts 
and implement them in building full stack apps. 


What this book covers 


Chapter 1, Exploring the Core Concepts of JavaScript, is where you discover how to use 
variables, conditions, and loops in JavaScript. 


Chapter 2, Exploring the Advanced Concepts of JavaScript, is where you learn how to use 
object-oriented programming in JavaScript. 


Chapter 3, Getting Started with Vue.js, is where you learn the basics of Vue.js, with 
components and directives. 


Chapter 4, Advanced Concepts of Vue.js, is where you explore in-depth Vue.js with 
communication between components and visual effects. 


Chapter 5, Managing a List with Vue.js, is where you learn how to build a full project 
with Vue.js. 


Chapter 6, Creating and Using Node.js Modules, is where you learn the basics of Node.js 
programming with modules. 


Chapter 7, Using Express with Node.js, is where you explore the main library used to build 
Node.js applications. 
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Chapter 8, Using MongoDB with Node.js, is where you learn how to use the MongoDB 
database with Node.js using the Mongoose module. 


Chapter 9, Integrating Vue.js with Node.js, is where you learn how to build a full project 
integrating Vue.js and Node.js. 


To get the most out of this book 


Prior knowledge of HTML and CSS is a must for this book. 


Software/hardware covered in the book Operating system requirements 
JavaScript Windows, macOS, or Linux 
Vue.js 

Node.js 


If you are using the digital version of this book, we advise you to type the code yourself 
or access the code from the book’s GitHub repository (a link is available in the next 
section). Doing so will help you avoid any potential errors related to the copying and 
pasting of code. 


Download the example code files 


You can download the example code files for this book from GitHub at https: // 
github.com/PacktPublishing/JavaScript-from-Frontend-to-Backend. 
If there's an update to the code, it will be updated in the GitHub repository. 


We also have other code bundles from our rich catalog of books and videos available at 
https: //github.com/PacktPublishing/. Check them out! 


Download the color images 


We also provide a PDF file that has color images of the screenshots and diagrams used in 
this book. You can download it here: https: //packt .link/xdibe 
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Conventions used 


There are a number of text conventions used throughout this book. 


Code in text: Indicates code words in text, database table names, folder names, 
filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. 
Here is an example: “So { lastname: "Clinton" } can also be written 

{ "lastname": "Clinton" } by surrounding the lastname property with 
single or double quotes.’ 


A block of code is set as follows: 


var p = { lastname : "Clinton", firstname s "Bill" Hg 


console.log("The person is", p); 


When we wish to draw your attention to a particular part of a code block, the relevant 
lines or items are set in bold: 


class Person { 
firstname; 
lastname; 


age; 


var p = new Person; 


console.log(p) ; 


Bold: Indicates a new term, an important word, or words that you see onscreen. For 
instance, words in menus or dialog boxes appear in bold. Here is an example: “This 
writing format is also called JavaScript Object Notation (JSON) format.” 


Tips or Important Notes 
Appear like this. 
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Get in touch 


Feedback from our readers is always welcome. 


General feedback: If you have questions about any aspect of this book, email us at 
customercare@packtpub. comand mention the book title in the subject of 
your message. 


Errata: Although we have taken every care to ensure the accuracy of our content, mistakes 
do happen. If you have found a mistake in this book, we would be grateful if you would 
report this to us. Please visit www. packtpub.com/support/errata and fill in 

the form. 


Piracy: If you come across any illegal copies of our works in any form on the internet, 
we would be grateful if you would provide us with the location address or website name. 
Please contact us at copyright@packt . com with a link to the material. 


If you are interested in becoming an author: If there is a topic that you have expertise in 
and you are interested in either writing or contributing to a book, please visit authors. 
packtpub.com. 


Share Your Thoughts 


Once you've read JavaScript from Frontend to Backend, wed love to hear your thoughts! 
Please click here to go straight to the Amazon review page for this book and share 
your feedback. 


Your review is important to us and the tech community and will help us make sure 
were delivering excellent quality content. 


Part 1: 
JavaScript Syntax 


This part explains the basics you need to know to use JavaScript on the client or on the 
server. It explains the syntax and the main data types that can be used in JavaScript. 


This section comprises the following chapters: 


¢ Chapter 1, Exploring the Core Concepts of JavaScript 
e Chapter 2, Exploring the Advanced Concepts of JavaScript 


1 


Exploring the 
Core Concepts 
of JavaScript 


The JavaScript language was created (in the mid-1990s) to be executed in internet 
browsers, in order to make websites more fluid. It was originally used to control what was 
entered into input forms. For example, it was used to do the following: 


e Allow the entry of numeric characters in a field - and only numeric ones. Other 
characters, for example, letters, had to be rejected in this case. This made it possible, 
thanks to the JavaScript language included in the browser, not to validate the entry 
of the form and avoid sending data to the server, which would have indicated an 
entry error in this case. 


e Check that the mandatory fields of the form were all entered, by checking all the 
fields before sending the form fields to the server. 
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These two examples (among many others) show that it is desirable to have a language that 
checks the validity of the data entered by the user before sending this data to the server. 
This avoids data transfers from the browser to the server, in the event that the data entered 
is not correct. For more complex checks, such as checking that two people do not have 

the same identifier, this can continue to be done on the server because it has access to all 
existing identifiers. 


The goal was, therefore, at the beginning of JavaScript, to have the browser check as many 
things as possible and then transmit the information entered to the server in order to 
process it. 


For this, an internal browser language was created: the JavaScript language, whose name 
contained a very popular word at the time - “Java” (even though the two languages Java 
and JavaScript had nothing to do with each other). 


Over the years, developers have had the idea of also associating it with the server side, to 
use the same language on the client side and on the server side. This allowed the creation 
of the Node.js server, which is widely used today. 


Whether client-side or server-side, the JavaScript language uses a basic syntax that allows 
you to write your own programs. This is what we are going to discover in this chapter. 


In this chapter, we will cover the following topics: 


e Types of variables used in JavaScript 

e Running a JavaScript program 

e Declaring variables in JavaScript 

e Writing conditions for conditional tests 
e Creating processing loops 


e Using functions 


Technical requirements 


To develop in JavaScript, and write and then run the programs in this book, you will need 
the following: 


e A text editor for computer programs, for example, Notepad++, Sublime Text, 
EditPlus, or Visual Studio. 


e An internet browser, for example, Chrome, Firefox, Safari, or Edge. 
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A PHP server, for example, XAMPP or WampServer. The PHP server will be used 
to execute JavaScript programs containing import statements in HTML pages 
because these import statements only work on an HTTP server. 


A Node.js server: The Node.js server will be created through Node.js installation. 
We will also install and use the MongoDB database to associate the Node.js server 
with a database. 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript-from-Frontend-to-Backend/blob/ 
main/Chapter%201.zip. 


Let’s now begin our discovery of JavaScript, by studying the different types of variables it 
offers us. 


Types of variables used in JavaScript 


Like any language, JavaScript allows you to create variables that will be used to manipulate 
data. JavaScript is a very simple language so, for example, data types are very basic. 
We will thus have the following as the main data types: 


Numerical values 
Boolean values 
Character strings 
Arrays 

Objects 


Let’s take a quick look at these different types of data. 


Numerical values 


Numerical values can be positive or negative and even in decimal form (for example, 
0, -10, 10.45). All mathematical numbers called real numbers comprise numerical values 
or data points. 
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Boolean values 


These are of course the two Boolean values—true or false—that are found in most 
languages. These values are used to express conditions: if the condition is true, then 

we perform a particular process, otherwise, we perform an alternative one. The result 
of the condition is therefore a true or false value, which is symbolized by the two values 
true and false. 


We will see how to express conditions in the Writing conditions section, later in 
this chapter. 


Character strings 


Character strings refer to values suchas "a", "abc", or "Hello, how are you?". 
An empty character string will be represented by "" (consecutive quotes with nothing 
inside). Note that you can use double quotes (") or single quotes ('). Thus, the string 
"abc" can also be written as 'abc' (with single quotes). 


Arrays 


Arrays, suchas [10, "abc", -36], can contain values of any type, like here where 
we have both numeric values and character strings. An empty array will be represented 
by [], which means that it contains no value. 


The values stored in an array are accessed by means of an index, varying from 0 (to access 
the first element placed in the array) to the length of the array minus 1 (to access the last 
element of the array). So, ifthe array [10, "abc", -36] is represented, for example, 
by the variable tab, the following occurs: 


e tab[0] will allow access to the first element of the array: 10. 
e tab[1] will allow access to the second element of the array: "abc". 


e tab [2] will allow access to the third and last element of the array: - 36. 


Note 

Note that it is possible to add elements to an array, even if it is empty. So, if 
we access index 3 of the previous array tab, we can write tab [3] = 
"def". The array tab will thereforenowbe [10, "abc", -36, 

" def " ] b 
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Objects 


Objects are similar to arrays. They are used to store arbitrary information, for example, 
the values 43, "Clinton", and "Bill". But unlike arrays that use indexes, you must 
specify a name to access each of these values. This name is called the key, which thus 
allows access to the value it represents. 


Let’s suppose that the previous value 43 is that of a person’s age, while "Clinton" is 
their last name, and "Bill" is their first name. We would then write the object in the 
following form: { age: 43, lastname: "Clinton", firstname: "Bill" 

}. The definition of the object is done by means of braces, and what is indicated inside is 
pairs of data of the form key: value separated by commas. This writing format is also 
called JavaScript Object Notation (JSON) format. 


So, if the previous object is associated with the variable person, we can access their age 
by writing person ["age"] (which will therefore be 43 here), but we can also write 
person .age, which will also be 43. Similarly, we can also write person. lastname 
or person ["lastname"] and person. firstname or person ["firstname"] to 
access the person's last name and first name, respectively. 


The key is also called a property of the object. Thus, the age key is also called the age 
property. We can choose any name for the key; you just have to indicate the key and then 
use it under this name. So, if you specify age as a property in the person object, you 
must use the term age in the expressions person. age or person ["age"]; otherwise 
it will not work. 


Note that if you write person [age] instead of person ["age"] , JavaScript considers 
age to bea variable with a previously defined value, which it is not here and therefore 
cannot work in this case. You would have to set the age variable to have the value "age" 
for this to work. 


The elements of an array are ordered according to their index (starting from 0, 

then 1, and so on), while the elements contained in an object are ordered according to 
the keys indicated for each element. But even though the lastname key is listed in the 
person object before the firstname key, this does not differentiate the object 

{ age: 43, lastname: "Clinton", firstname: "Bill" } from the object 
{ firstname: "Bill", lastname: "Clinton", age: 43 } because the 
order in which keys are written to an object is irrelevant. 


Finally, there are empty objects, such as those containing no key (therefore no value). 
We write an empty object in the form { }, indicating nothing is inside. We can then add 
one or more keys to an object, even if it is initially empty. 
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Now that we have seen the main variable types used in JavaScript, let’s see how to use 
them to define variables in our programs. 


Running a JavaScript program 


JavaScript is a language that can be executed in a browser (Edge, Chrome, Firefox, Safari, 
and so on) or on a server with Node.js installed. Let’s see how to write JavaScript programs 
for these two types of configurations. 


Running a JavaScript program in a browser 


To run a JavaScript program in a browser, you must insert the JavaScript code into an 
HTML file. This HTML file will then be displayed in the browser, which will cause the 
execution of the JavaScript code included in the file. 


JavaScript code can be specified in the HTML file in two different ways: 


e ‘The first way is to write it between the <script> and </script> tags, directly in 
the HTML file. The <script > tag indicates the beginning of the JavaScript code, 
while the </script> tag indicates the end of it. Anything written between these 
two tags is considered JavaScript code. 


e ‘The second way is to write the JavaScript code in an external file and then include 
this external file in the HTML file. The external file is included in the HTML file 
by means of a <script> tag in which the src attribute is indicated, the value of 
which is the name of the JavaScript file that will be included in the HTML page. 


Let’s take a look at these two ways of writing the JavaScript code that will run in 
the browser. 


Writing JavaScript code between the <script> and </script> tags 


A file with an . htm1 extension is used; for example, the index.html file. This file is 
a traditional HTML file, in which we have inserted the <script> and </script> tags, 
as shown in the following code snippet: 


index.html file 


<html> 
<head> 
<meta charset="utf-8" /> 


<script> 
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alert("This is a warning message displayed by 
JavaScript") ; 
</script> 
</head> 
<body> 
</body> 
</html> 


We have inserted the <script > tag (and its ending </script>) in the <head> section 
of the HTML page. The <metas> tag is used to indicate the encoding characters to use. 

In the preceding code, we have used utf - 8 so that accented characters can be 

displayed correctly. 


The JavaScript code inserted here is rudimentary. We use the alert () function, which 
displays a dialog box on the browser screen, displaying the text of the message indicated in 
the first parameter of the function. 


To run this HTML file, simply move it (by dragging and dropping) from the file manager 
to any browser; for example, Firefox. The following screen is then displayed: 


File Edit View History Bookmarks Tools Help 


@ * /D:/Documents/www/javascri X + 


< X D file:///D:/Documents/www/ja YF 


@ file:// 


This is a warning message displayed by JavaScript 


Figure 1.1 - Displaying a message in the browser window 
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The JavaScript code present in the <script> tag ran when the HTML page was loaded. 
The message indicated in the alert () function is therefore displayed. A click on the OK 
button validates the message displayed and continues the execution of the JavaScript code. 
As we can see, there is nothing more in the program; the program ends immediately by 
displaying a blank page on the screen (because no HTML code is inserted into the page). 


Writing JavaScript code to an external file 


Rather than integrating the JavaScript code directly into the HTML file, we can put it in 
an external file, then insert this file into our HTML file by indicating its name in the src 
attribute of the <script> tag. 


Let’s first write the file that will contain the JavaScript code. This file has the file extension 
. js and will be named codejs. js, for example, and will be coded as follows: 


codejs.js file (in the same directory as index.html) 


alert ("This is a warning message displayed by JavaScript"); 


The codejs . js file contains the JavaScript code that we had previously inserted between 
the <script>and </script> tags. 


The index.html file is modified to include the codejs.js file using the src attribute 
of the <script > tag as follows: 


index.html file 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="codejs.js"></script> 
</head> 


<body> 
</body> 
</html> 


Note 


Notice the use of the <script> and </script> tags. They are contiguous 
(that is, they have no spaces or newlines between them), which is necessary for 
this code to work. 
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In the rest of our examples, we will mainly use the insertion of the JavaScript code 
directly in the code of the HTML file, but the use of an external file would produce the 
same results. 


Let’s now explain another way to display messages, without blocking the program as 
before with the alert (message) function. 


Using the console.log() method instead of the alert() function 


The alert () function used earlier displays a window on the HTML page, and the 
JavaScript program hangs waiting for the user to click the OK button in the window. 
Thus, the function requires the intervention of the user to continue the execution of 
the program. 


An alternative makes it possible to use a display without blocking the execution of the 
program. This is the display in the console, using the console.log () method. 


Note 


The console.log () form of writing means that we use the log () 
method, which is associated with the console object. This will be explained 
in detail in the following chapter. 


Let’s write the program again using the console.log () method instead of the 
alert () function. The index.html file will be modified as follows: 


index.html file using console.log() method 


<html> 
<head> 
<meta charset="ut£-8" /> 
<script> 
// display a message in the console 
console.log("This is a warning message displayed by 
JavaScript"); 
</script> 
</head> 


<body> 
</body> 
</html> 
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Note 


The use of comments in the JavaScript program requires placing // before 
what needs to be commented out (on the same line). You can also comment out 
several lines by enclosing them with /* at the beginning and * / at the end. 


Let’s run this program by pressing the F5 key on the keyboard to refresh the window. 
A white screen will appear, with no message. 


Indeed, the message is only displayed in the console. The console is only visible if you 
press the F12 key (and can be removed by pressing F12 again). 


Note 


You can go to the sitehttps://balsamiq.com/support/fags/ 
browserconsole/, which explains how to display the console in the event 
that the F12 key is inoperative. 


The following is what you will see when the console is displayed: 


File Edit View History Bookmarks Tools Help 


ğ 


/D:/Documents/www/javascript/in X + 


< CD ffile:///D:/Documents/www/jav YP >» 


Ce © Inspector ©) Console [ Debugger >> óJ eee X 
Ô ME * 


Errors Warnings Logs Info Debug CSS XHR Requests 


This is a warning message displayed -ml line 5 > inlineScript:6:15 
by JavaScript 


» ‘au 


Figure 1.2 - Message displayed in the console 
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The message is displayed in the lower part of the browser window. 


Now that we have learned how to run a JavaScript program in a browser, let’s move on to 
learning how to run a JavaScript program on a Node.js server. 


Running a JavaScript program on a Node.js server 


To run a JavaScript program on a Node.js server, you must first install the Node.js server. 
To install, simply go to https: //nodejs.org/ and download and install the server. 
Note that if you are using macOS, Node.js is already installed. 


We can verify the correct installation of Node.js by just opening a shell and typing the 
command node -hin it. Node.js is correctly installed if the command help appears 
as follows: 


ic.) Terminal 


Figure 1.3 - node -h command that displays help 


Once Node.js is installed, it can run any JavaScript program you want. All you have to do 
is create a file containing JavaScript code, for example, testnode. js. The contents of 
this file will be executed by the server using the node testnode.js command. 
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Here is a very simple example of a JavaScript file that can be executed by Node.js: 
It displays a message in the server console. The server console here represents the 
command interpreter in which you type the command to execute the testnode. js file: 


testnode.js file 


console.log("This is a warning message displayed by 
Javase cipe 


Lets type the command node testnode.js in the preceding terminal window. 


fcs.. Terminal 


Figure 1.4 - Running a Node.js program 


We see that the message is displayed directly in the command interpreter. 


In the previous examples, we have written JavaScript code that runs both on the client side 
(the browser) and on the server side. The question that can be asked is: can the same code 
run in exactly the same way on the client side and on the server side? 


Differences between JavaScript code written for the 
browser and the server 


Although the two pieces of code are similar, we cannot say that they are the same, because 
the issues to be managed are different in the two cases. Indeed, on the client side, we will 
mainly want to manage the user interface with JavaScript, while on the server side, we will 
rather want to manage files or databases. So, the libraries to use in these two cases will not 
be the same. 


On the other hand, we find in both cases the same basic language, which is the JavaScript 
language that we will be describing now. 
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Declaring variables in JavaScript 


Variables of the types previously described under the Types of variables used in JavaScript 
section, as we know, consist of numerical values, Boolean values, character strings, arrays, 
and objects. 


JavaScript is a weakly typed language, which means that you can change the type of 
a variable at any time. For example, a numeric variable can be transformed into 
a character string, or even become an array. 


Of course, it is not advisable to make such voluntary changes in our programs, and it is 
prudent to maintain the type of a variable throughout the program, for comprehension. 
However, it is important to know that JavaScript allows changing variable types. A variant 
of JavaScript called TypeScript provides more security by preventing these type changes 
for variables. 


Now let’s learn how to define a variable. We will do so using one of the following 
keywords: const, var, or let. 


Using the const keyword 


The const keyword is used to define a variable whose value will be constant. Any 
subsequent attempt to change the value will produce an error. 


Let’s define the constant variable c1 having the value 12. Lets try to modify the value by 
assigning it a new value: an error will be displayed in the console: 


Note 


To say that we are defining a constant variable is an abuse of language. 
We should rather say that we are defining a constant value. 


Defining a constant value (index.html file) 


<html> 
<head> 
<meta charset="ut£-8" /> 
<script> 
const cl = 12; 
console.log(cl) ; 
Gil = l3; // attempt to modify the value of a 


// constant: error 
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console.log(c1); // no display because an error 


// occurred above 
</script> 


</head> 


<body> 
</body> 
</html> 


After implementing the preceding code, we will also see the error displayed in the console 


(if the console is not visible, it can be displayed by pressing the F12 key) of the browser 
as follows: 


(File Edit View History Bookmarks Tools Help - ogg .*x 


@ _/0:/Documents/javascript/index.h x | + 


& > © D file///D:/Documentsfavasci YF » 


Ce O Inspector EŒ) Console © Debugger > @1 Gj] X 
W Y Filter Output xt 


Errors Warnings Logs Info Debug CSS XHR Requests 


12 index. htm1:6:15 


@ > uncaught Typecrror: invalid assignment to const 'c1' index.html:7:7 
<anonymous> _D:/Documents/javascript/index.html:7 
[Learn More] 


» 


oO 


Figure 1.5 - Error when modifying a constant value 
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As we can see from the preceding figure, the first display of the constant c1 displays 

the value 12, while the second display does not occur because an error occurred before 
(while trying to change the value of a constant). Therefore, a value defined by the const 
keyword should not be modified. 


Using the var keyword 


Another way to define a variable (whose value can be modified) is to use the var 
keyword. Let’s see how using the following code example: 


Definitions of several variables 


<html> 
<head> 
<meta charset="utf£-8" /> 
6 Giga pie 
var a = 12; 
var b = 56; 


var c = a + b; 


var sl = "My name is "; 
var firstname = "Bill"; 
console.log("a + b=" + a+b); 
console.log("c = " + c); 


console.log(sl + firstname); 
</script> 
</head> 


<body> 
</body> 
</html> 


We defined the variables a, b, s1, and firstname by preceding them with the keyword 
var and assigning them a default value. The variable c corresponds to the addition of the 
variables a and b. 
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Note 


The name of a variable consists of alphanumeric characters but must start with 
an alphabetic character. Lowercase and uppercase are important in writing 
the variable name (variables names are case sensitive). Thus, the variable a is 
different from the variable A. 


The result of the previous program is displayed in the browser console (if it is not visible, 
it must be displayed by pressing the F12 key): 


(File Edit View History Bookmarks Tools Help 


= oO x 
@ /D:/Documents/www/javascript/in X + 
& > © OD file///D:/Documentsfwww/ja Y7 D S 
Ce O Inspector E) Console © Debugger » OJ = X 


W Y Filter Output xt 


Errors Warnings Logs Info Debug CSS XHR Requests 


A This page is in Quirks Mode. Page layout may be impacted. index.html 
For Standards Mode use “<!DOCTYPE html>”. [Learn More] 


a+b = 1256 index. html:10:15 
c = 68 index. htm1:11:15 
My name is Bill index. htm1:12:15 


» a 


Figure 1.6 - Using the var keyword 


In the preceding figure, we can see a result that may seem surprising. Indeed, the direct 
calculation of a + b produces the display of 1256 the first time, then 68 the second time. 


Indeed, when we write console.log("a + b = " + a + b); the fact that 

we've started to display characters by writing "a + b = " means that JavaScript will 
interpret the rest of the display in the form of a character string; in particular, the values 
a and b, which follow on the line. So, the values a and b are no longer interpreted as 
numeric values, but as the character strings 12 and 56. When these character strings are 
connected by the + operator, this does not correspond to addition but to concatenation. 
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Conversely, the calculation of the variable c does not involve character strings, 
so the result of a + b here is equal to the sum of the values of the variables a and b, 
therefore 68. 


Note that the same program can be run on the Node.js server. To do so, we would write 
itin our testnode. js file as follows: 
testnode.js file 


Wee cl = ye 
Wee Jey = 567 


Wine CS a i oz 


var sl = "My name is "; 
var firstname = "Bill"; 
console.log("a +b=" + a+b); 


console.log("c 


na ©) 5 


console.log(sl + firstname); 


We can then execute the preceding code with the node testnode.js command. The 
result displayed under Node.js is similar to that displayed in the browser console: 


ic.) Terminal 


Figure 1.7 - Running the program under Node.js 


We learned about the const and var keywords for defining variables; all that remains is 
for us to learn how to use the let keyword. 
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Using the let keyword 


To understand the use of the let keyword and see the difference from the var keyword, 
we must use braces in our programs. Braces are used to create program blocks in which 
instructions are inserted, in particular after the conditional if and else instructions 
(which we will see in the Writing conditions section). 


Let’s write a simple if (true) condition that is always true: the code included in the 
braces following the condition is therefore always executed: 


index.html file including a condition 


<html> 
<head> 
<meta charset="utf-8" /> 
Rfekehealj es 
varkom- IAs 
if (true) { // always executed (because always true) 
Wee ly = 567 
leg € = 397 
console.1 "In the brace:") ; 
console.1 ug = te ioy 


le = W n c); 
1 


og ( 
console.log("a = " + a); 
og ( 
console.log ( 


console.log("After the brace:"); 
console.log("a = " + a); 


consolernlog ((Miay = eh Jo))) g 


( 
( 
( 
( 


EComsole, hoc (Te = Y ss Cl) yz 
</script> 
</head> 


<body> 
</body> 
</html> 
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In the preceding code, we have defined the variable a outside of any braces. This variable 
will therefore be accessible everywhere (in and out of braces) as soon as it is defined. 


The variables b and c are defined within braces following the condition. Variable b is 
defined using var, while variable c is defined using the let keyword. The difference 
between the two variables is visible as soon as you exit the block of braces. Indeed, the 
variable c (defined by let) is no longer known outside the block of braces where it is 
defined, unlike the variable b (defined by var), which is accessible even outside. 


This can be checked by running the program in the browser as follows: 


(File Edit View History Bookmarks Tools Help a oO x 


/D:/Documents/www/javascript/in: X + 


€ C O file:///D:/Documents/www/javasc Y? > = 

Ce © Inspector Console © Debugger >> @: Gj e x 

Di Y Filter Output xt 

Errors Warnings Logs Info Debug CSS XHR Requests 

A This page is in Quirks Mode. Page layout may be impacted. For index.html 
Standards Mode use “<!DOCTYPE html>”. [Learn More] 
In the brace: index. htm1:9:17 
a= 12 index. html:10:17 
b = 56 index. html:11:17 
c = 89 index. html:12:17 
After the brace: index. htm1:15:15 
a= 12 index. html:16:15 
b = 56 index. html:17:15 

@ > uncaught ReferenceError: c is not defined index. htm1:18:7 


<anonymous> _:///D:/Documents/www/ javascript/index.html:13 


[Learn More] 


» | Oo 


Figure 1.8 - The variable c defined by let is inaccessible outside the block where it is defined 
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Note that the same program gives a similar result on the Node.js server, as can be seen in 
the following screen: the variable c defined by let in a block becomes unknown outside 
the block. 


c+.) Terminal 


Figure 1.9 — The same results on the Node.js server 


As we can see in the preceding screen, the variable c, defined by let in a block, becomes 
unknown outside the block. 


What if we don’t use var or let to define a variable? 


It is possible not to use the var or let keywords to define a variable. We can simply write 
the variable’s name followed by its value (separated by the sign =). Let’s see how using the 
following example: 


Creating variables without specifying var or let 


a = ee 
lo) & Boe 
EOMSOle, hoc (Wa = Y s el) z // displays the value 12 
Console. logho = W = 19)7 // displays the value 56 


In the preceding example, where the variables are initialized without being preceded 
by var or let, these variables are global variables. As soon as they are initialized, they 
become accessible everywhere else in the program. This will become apparent when 
we study the functions in the Using functions section of this chapter. 
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Note 

It is strongly advised to use as few global variables as possible in the 
programs, as this complicates the design and debugging of the programs that 
contain them. 


What is an uninitialized variable worth? 


Each of the preceding variables was declared by initializing its value, with the = sign, 
which is the assignment sign. Let’s see what happens if we don't assign any value to the 
variable, but just declare it using var or let as follows: 


Declaration of variables without initialization 


<html> 
<head> 
<meta charset="utf£-8" /> 


<script> 
var a; 
let b; 
console.log("a = " + a); // displays the value 
// undefined 
console.log("b = " + b); // displays the value 


// undefined 
</script> 
</head> 


<body> 
</body> 
</html> 


In the preceding code, we have defined two variables, a and b - one using var, the other 
using let. Neither of the two variables has an initial value (that is, they're not followed 
by an = sign). 


The result displayed in this case for these uninitialized variables is a JavaScript value called 
undefined. This corresponds to the value of a variable that does not yet have a value. 
The undef ined value is an important keyword in the JavaScript language. 
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Note 


The variables a and b are not initialized, and it is necessary to declare them 
using var or let. Indeed, you cannot simply write a; or b; as this would 
cause a runtime error. 


Let’s run the preceding program in the browser and observe the results displayed in 
the console: 


[File Edit View History Bookmarks Tools Help —- g x 


/D:/Documents/javascript/index.ht: X + 


€ CD ffile///D:/Documents/avascrip { X = 
i 0 Inspector GJ Console © Debugger >> úJ coe X 
Di Y Filter Output Ee 
Errors Warnings Logs Info Debug CSS XHR Requests 
= undefined index.html:7:15 
= undefined index.html:3:15 


» ‘eu 


Figure 1.10 - An uninitialized variable is undefined 


Note 


The undef ined value is also associated with an uninitialized variable if 
using server-side JavaScript with Node.js. 


We now know how to define variables in JavaScript. To create useful JavaScript programs, 
you have to write sequences of instructions. One of the most used instructions allows you 
to write conditional tests with the if statement, which we will talk about next. 
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Writing conditions for conditional tests 


JavaScript obviously allows you to write conditions in programs. The condition is 
expressed through the if (condition) statement: 


e Ifthe condition is true, the statement (or block in braces) that follows is executed. 


e Ifthe condition is false, the statement (or block) following the else keyword 
(if present) will be executed. 


Forms of writing instructions 


We can use the following forms to express the conditions: 


Forms of conditional expressions with if (condition) 


// condition followed by a statement 


if (condition) statement; // statement executed if condition 
is true 


// condition followed by a block 
if (condition) { 
// block of statements executed if condition is true 
statement 1; 
statement 2; 
statement 3; 


Forms of conditional expressions with if (condition) ... else... 


// condition followed by a statement 

if (condition) statement 1; // statement 1 executed if 
M econdition isi Erue 

else statement 2; // statement 2 executed if 


// condition is false 


// condition followed by a block 

ie (Gemebiiesiom) 
// block of statements executed if condition is true 
statement 1; 
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statement 2; 
statement 3; 
} 
else { 
// block of statements executed if condition is false 
statement 5; 
statement 6; 
statement 7; 


Note 


If the process to be executed includes several instructions, these instructions 
are grouped together in a block surrounded by braces. A block can consist 
of only one statement, even if, as in this case, the block is optional (no need 
for braces). 


Let’s write the following program in the testnode. js file, which we will execute using 
the node testnode.js command in a command interpreter, as follows: 


testnode.js file 

Wee @ =D 

console.log("a = " + a); 

ie la Se 12) console. decia is: LAT) z 


else console.log("a is not 12"); 


In the preceding code, the condition is expressed in the form a == 12. Indeed, it is 
customary to test the equality between two values by means of the sign = repeated twice 
successively (hence ==). 


Note 


We use == for equality, ! = for difference, > or >= to check superiority, 
and < or <= to check inferiority. 
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In the preceding code, since the variable a is 12, the following result can be seen: 


ic.) Terminal 


Figure 1.11 - Using conditional tests 


If we assign the value 13 to the variable a, the else part of the statement will 
be executed: 


en) Terminal 


Figure 1.12 - Running the else part of the test 


We have seen how to execute one part of the code or another depending on a condition. 
Let's now study how to write more complex conditions than those written previously. 


Expressions used to write conditions 


The condition written previously is a simple test of equality between two values. But the 
test to write can sometimes be more complex. The goal is to have the final result of the 
condition, which is true or false, which will then make it possible for the system to 
decide the next course of action. 
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The condition is written in Boolean form with the OR keyword (written as | |) or with 
the AND keyword (written as &&). Parentheses between the different conditions may be 
necessary to express the final condition as follows: 


Condition expressed with “or” 


Wee @ = ise 

wee lg = Bop 

console.log("a = " + a); 

Consolerlocs GUoi—ai ater) 

if (a == 12 || b > 50) console.log("condition a == 12 || b > 50 


La CUST) p 


else console.log("condition a == 12 || b > 50 is false"); 


In the preceding code, since the variable b is greater than 50, the condition is true, as 
seen in Figure 1.13. 


Note 


In an OR condition, it suffices that one of the conditions is true for the final 
condition to be true. 


In an AND condition, all the conditions must be true for the final condition 
to be true. 


cs.) Terminal 


ocuments \Node 


Figure 1.13 - Condition with or 


By default, the condition expressed in if (condition) is compared with the value 
true. We can sometimes prefer to compare with the value false. In this case, it suffices 
to precede the condition with the sign !, which corresponds to a negation of the 
following condition. 
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It is sometimes necessary to chain several tests in a row, depending on the results of the 
previous tests. We then have a succession of tests, called cascade tests. 


Nested test suites 


It is possible to chain tests in the processes to be performed. Here is an example: 


Test nesting 

Wee m = 137 

Waele ley = 567 

console.log("a = " + a); 

consoles log ULES 

iE (a == 12) console log (Moeondaltzdonmag———l2 ig ECs) p 
else { 

console.log("condition a == 12 is false"); 


aE (le) = 50) Conce. loc ((Wieresarelaiicakoie, Is) = 50 ake) gitat) y 
else console.log ("condition b > 50 is false"); 


} 


The else part is composed of several statements and is grouped in a block surrounded 
by braces: 


tn) Terminal 


Figure 1.14 — Test nesting 


We learned about writing conditions in JavaScript programs. We are now going to learn 
how to write processing loops, which make it possible to write the instructions in the 
program only once. These instructions can, however, be executed as many times 

as necessary. 
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Creating processing loops 


It is sometimes necessary to repeat an instruction (or a block of instructions) several 
times. Rather than writing it several times in the program, we put it in a processing loop. 
These instructions will be repeated as many times as necessary. 


Two types of processing loops are possible in JavaScript: 
e Loops with the while () statement 
e Loops with the for () statement 


Let’s take a look at these two types of loops. 


Loops with while() 


The while (condition) instruction allows you to repeat the instruction (or the block 
of instructions) that follows. As long as the condition is true, the statement (or block) is 
executed. It stops when the condition becomes false. 


Using this while () statement, lets display the numbers from 0 to 5: 


Displaying numbers from 0 to 5 


Were i = Op 

while (i <= 5) { 
console.log("i 
i++; 


} 


The preceding console.log () instruction is written only once in the program, but as 
it is inserted in a loop (while () instruction), it will be repeated as many times as the 
condition is true. 


The variable i allows you to manage the condition in the loop. The variable i is 
incremented by 1 (by i++) at each pass through the loop, and we stop when the value 5 
is exceeded: 
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ic.) Terminal 


Figure 1.15 - Displaying numbers from 0 to 5 


We can verify that this program works in a similar way on the client side, that is to say in 
a web browser, as follows: 


Displaying digits 0-5 in a browser console 


<html> 
<head> 
<meta charset="utf£-8" /> 
<script> 
var i = 0; 
while (i <= 5) { 
console.log("i = " + i); 
i++; 
} 
</script> 
</head> 


<body> 
</body> 
</html> 
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The result is displayed similarly in the browser console: 


(File Edit View History Bookmarks Tools Help 25 A x 


/D:/Documents/javascript/index.ht: X + 


€ © D ffile:///D:/Documents/javascript Y = 
Ce © Inspector Console © Debugger >> OJ s- X 
Errors Warnings Logs Info Debug CSS XHR Requests 
i-=@ index. html:7:17 
i=1 index.html:7:17 
i=2 index.html:7:17 
i=3 index.html:7:17 
i=4 index.html:7:17 
i=5 index.html:7:17 


Figure 1.16 - Displaying numbers from 0 to 5 in the browser console 


Loops with for() 


Another widely used form of loop is one with a for () statement. It simplifies the writing 
of the previous loop by reducing the number of instructions to write. 


Let’s write the same program as before to display the numbers from 0 to 5 using a for () 
statement instead of the while () statement: 


Rone (vea i=0p a <= Se dar) Console iloe (Ma, = U es a) z 


As we can see in the preceding code, a single line replaces several lines as in the 
previous instance. 


The for () statement has three parts, separated by a ;: 


e ‘The first corresponds to the initialization instruction. Here, it is the declaration of 
the variable i initialized to 0 (which is the beginning of the loop). 


e ‘The second corresponds to the condition: as long as this condition is true, the 
statement (or the block that follows) is executed. Here, the condition corresponds to 
the fact that the variable i has not exceeded the final value 5. 
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e The third corresponds to an instruction executed after each pass through the 
loop. Here, we increment the variable i by 1. This ensures that at some point, the 
condition will be false, in order to exit the loop. 


Let’s verify that it works identically to the while () statement: 


fcn] Terminal 


a 


1 


Figure 1.17 — Loop with the for() statement 


In this section, we learned how to write sequences of statements that will be executed 
multiple times, using the while () and for () statements. Now let’s look at how to group 
statements together, using what are called functions. 


Using functions 


A function is used to give a name to a block of instructions so that it can be used in 
different places in the program. In general, in a function, we group a set of instructions 
that are used to carry out a particular task, for example: 


e Display the list of the first 10 integers. 
e Calculate the sum of the first 10 numbers (from 0 to 9). 


e Calculate the sum of the first N numbers (from 0 to N-1). In this case, N would 
be a parameter of the function because it can change with each call (or use) of 
the function. 
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The functions described above are very simple but show that the role of functions is to 
encapsulate any process by summarizing in one sentence what is expected of this process. 
The name given to the function symbolizes the action expected in return, which allows 
the developer to easily understand the sequence of instructions (including for an external 
developer who has not participated in the development). Let’s discuss the three functions 
we listed one by one. 


Function displaying the list of the first 10 integers 


Let’s write the first function, which displays the list of the first 10 integers. We will call this 
function display_10 first integers (). The name must be as explicit as possible 
because a JavaScript program is composed of many functions whose names must be 
unique in the program (if two function names are the same, only the last one is taken into 
account because it overwrites the former). 


A function is defined using the keyword function, followed by the name of the 
function, followed by parentheses. Then, we indicate in the braces that follow the 
instructions that make up the function. It is this instruction block that will be executed 
each time the function is called in the program. 


Let’s write the function display_10 first _integers (), which displays the first 
10 integers: 


Display first 10 integers with a function (testnode.js file) 


function display_10 first_integers() { 
ow (Wee teOp i <= lOp ats) comsoile, loc (Ma, = W a a) p 


} 


The function is defined using the function keyword, followed by the function name 
and parentheses. 


The function statements are grouped in the block that follows between the braces. We find 
as instructions the previous for () loop, but it could also be the while () loop, which 
works in the same way. 
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Let’s run this program assuming it’s included in the testnode. js file: 


fcn] Terminal 


Figure 1.18 - Using a function to display numbers from 1 to 10 


As we can see in the preceding figure, the screen remains blank as no display is registered 
in the console. 


Indeed, we have simply defined the function, but we must also use it, that is, call it in our 
program. You can call it as many times as you want - this is the purpose of functions: 

we should be able to call (or use) them at any time. But it must be done at least once; 
otherwise, it is useless, as seen in the preceding figure. 


Let’s add the function call following the function definition: 


Definition and call of the function 


Hi sewaychesloiay Claitalsaal ce loyal 
function display_10 first_integers() { 


Boi (Wee taOp i za lOp tit) eomgollea. ioe (Yi = U 4 a) p 


// function call 
display 10 first integers (); 
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The result of the preceding code can be seen in the following figure: 


man : 
c+. Terminal 


Figure 1.19 — Call of the display_10_first_integers() function 


Interestingly, the function can be called in several places of the program. Lets see how in 
the following example: 


Successive calls to the display_10_first_integers() function 


// function definition 
function display_10 first_integers() { 


Rone (van She@e a <= Op wa) comeoile, Ike (Ma = eb st) ¢ 


// function call 
console.log("*** 1st call *** "); 


display _10 first integers () ; 


console.log("*** 2nd call *** "); 


display 10 first integers () ; 


console.log("*** 3rd call *** "); 


Chigjoileny iL@_seaiesie_aliateerereuets (()) 5 
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In the preceding code, the function is called three times in succession, which displays the 
list of the first 10 integers as many times. The order of the calls is indicated before each list 
as follows: 


D:\Documents\Node.js>node testnode.js 
eee ISE call tE 


wu PBWN FP ® 


a 


coon 


oO 


aQ 
A 
0 
þm 
— 
i 
* 
* 


2 
8 
1 
2 
3 
4 
5 


oO 


con 


its] 


16 
3rd call *** 


Ww PWN Fe ® 


on 


ite) 


pà 
© 


D:\Documents\Node.js>, 


Figure 1.20 - Successive calls to the display_10_first_integers() function 
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Function calculating the sum of the first 10 integers 


We now want to create a function that calculates the sum of the first 10 integers, that is, 
1+2+3+4+5+6+7+8+9+10. The result is 55. This will allow us to show how a function 
can return a result to the outside (that is, to the program that uses it). Here, the function 
should return 55. 


Let’s call the function add_10_ first integers (). This can be written as follows: 


Function that adds the first 10 integers 


// function definition 
function add_10 first_integers() { 
wem towel = 0p 
more (var as a 0; a as 107 sites) Coel se ip 


Tertza TOLE, 


// function call 
Waele tortal = ere l0 seaieeie tartes) y 
consoleniogi Utoto MAME otaDE 


We define the total variable in the function. This variable is a local variable to the 
function because it is defined using the var or let keyword. This allows this total 
variable to not be the same as the one defined outside the function, even if the names are 
the same. 


Note 


If the total variable in the function was not defined using the var or let 
keyword, it would create a so-called global variable that would be directly 
accessible even outside the function. This is not good programming because 
you want to use global variables as little as possible. 


The function uses a for () loop to add the first 10 integers, then returns that total using 
the return keyword. This keyword makes it possible to make accessible, outside the 
function, the value of any variable, in our example, the total variable. 
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Let’s run the previous program. We should see the following output: 


cs.) Terminal 


Figure 1.21 - Calculation of the sum of the first 10 integers 


Function calculating the sum of the first N integers 


The previous function is not very useful because it always returns the same result. A more 
useful function would be to calculate the sum of the first N integers, knowing that N can be 


different each time the function is called. 


N would in this case be a parameter of the function. Its value is indicated in parentheses 
when using the function. 


Let's call the add_N_ first_integers () function to calculate this sum. The N 
parameter would be indicated in parentheses following the function name. A function 
can use several parameters, and it suffices to indicate them in succession, separated by 
a comma. In our example, a single parameter is enough. 


Lets write the add_N_ first integers (n) function and use that to calculate the sum 


of the first 10, then 25, then 100 integers. The values 10, 25, and 100 will be used 
as parameters during successive calls to the function and will replace the parameter 
n indicated in the definition of the function: 


Function that adds the first N integers 


if wewaNchedeia Cermen 
function add N first _integers(n) { 
were icoicell = Os 
foie (Weir a, = Of al <= ing a) icoicell tS ile 


IaSieunan jeoieeill 2 


// calculation of the first 10 integers 
var COTAL L0 = adden cirat yintegers (lo); 
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console.log("Total of the first 10 integers 


ll 


i ds Cocal LO) p 


// calculation of the first 25 integers 
Var corall 25 = ace Neimrsteantegess (25) p 
COIISOLES:, loe (Wrorcall oz chag rirse A5 aimieceeres = U = ocal AS) p 


// calculation of the first 100 integers 
var total _100 = add _N first integers (100) ; 


consoler kere (WaNoNeeL Gre icles) wwalseisie iO) aliolecreeucs} S 1 ch ie@ieelil al(0}@))) 5 


The add_N first _integers(n) function is very similar to the add_10_first_ 
integers () function written earlier. It uses the parameter n indicated between the 
parentheses and does not loop from 0 to 10 as before, but from 0 to n. Depending on the 
value of n that will be used when calling the function, the loop will thus be different, and 
the result returned by the function as well. 


When calling the function, it passes the parameters 10, 25, then 100 as desired. The 
result is returned by the function’s total variable, and then used by the total_10, 
total _25,and total_100 variables outside the function: 


cs.) Terminal 


Figure 1.22 - Calculation of the sum of the first 10, then 25, then 100 integers 


Summary 


The basic features of JavaScript have been covered in this chapter: variables with different 
types, conditional tests, loops, and functions. They are used on the client side and on the 
server side. 


In the next chapter, we'll take a look at some more in-depth features of JavaScript, such as 
object-oriented programming with JavaScript. 


2 


Exploring the 
Advanced Concepts 
of JavaScript 


In this chapter, we will explore the advanced features of JavaScript, such as object-oriented 
programming. We will also study two types of objects that are widely used in JavaScript: 
arrays and strings. Finally, we will see how JavaScript allows you to trigger deferred 
processing, using so-called callback functions. 


In this chapter, we'll be covering the following topics: 
e Classes and objects 
e Arrays 
e Character strings 
e Multitasking 


e Using promises 


All these topics are fundamental to building JavaScript applications. Let's start now! 
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Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript -from-Frontend-to-Backend/blob/main/ 
Chapter%202.zip. 


Classes and objects 


The notion of classes and objects is fundamental to programming languages. JavaScript 
allows them to be used as well. 


A class is used to represent any type of data. For example, people, customers, cars, and 
so on. We can define a class to represent each of these types of elements, for example, 

a Person class to represent people, a Client class to represent customers, and a Car 
class to represent cars. 


Note 
Note that the class name traditionally begins with an uppercase letter. 


An object, on the other hand, will be a particular element of a class (this element will 
be also called an instance). For example, among all the people of the class Person, the 
person identified by his name “Clinton” and his first name “Bill” represents a particular 
object of the class Person. This object can be associated, for example, with the variable 
p in the program. We can thus create variables to identify each object associated with 
the class. 


Defining a class 


The question to ask yourself when creating a class is what actions you want to perform on 
the type of data it represents. 


For example, if we create the Person class, we should ask what characterizes a person 
and what action can we perform on this class. We could, for example, say that the Person 
class is characterized by the last name, first name, and age of the person. You can also add 
an address, phone number, email, and so on. 
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As for the possible actions on people, we can imagine, for example, the action of getting 
married to another person, the action of moving to another city, the action of changing 
employers, and so on. 


Note 


Characteristics such as last name, first name, age, and so on are called 
properties of the class, while actions such as getting married, moving, and so 
on are called methods of the class. A class will therefore group together a set of 
properties and a set of methods. 


A JavaScript class is created using the keyword class followed by the name of the class, 
followed by braces describing the content. For example, the Person class will be created 
as follows: 


Person class 


class Person { 


} 


This definition of the Person class will not be very useful for now, because no properties 
or methods are defined inside it. We will see later how to improve it. 


Creating an object by using a class 


Once the class is defined, we can create objects associated with this class. For this, we use 
the keyword new followed by the name of the class. This creates a variable that represents 
an object of that class: 


Creating an object p of class Person 


// define the Person class 


class Person { 


} 


// create an object of class Person 
var p = new Person; // object p of class Person 
console.log (p); 
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This is what you will see: 


ic.) Terminal 


Figure 2.1 - Creating a Person class object 


The p object is displayed in the console. We are told that it is a Person class object 
and that it is empty { }. The representation of an object in the form of braces is traditional 
in JavaScript, as we saw in the Type of variables used in JavaScript section of the 


previous chapter. 


We can verify that it also works on the client side, in a browser. The HTML file is 


as follows: 


index.html file 


<html> 
<head> 
<meta eharset= Tutia 
SSCI oe = 
class Person { 
} 
var p = new Person; 
console.log (p); 
</script> 
</head> 


<body> 
</body> 
</html> 


> 
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Figure 2.2 - Creating an object in the browser 


We find the display of braces, which symbolizes the display of a JavaScript object. 


Creating an object without using a class 


It is possible to create an object without having created a class first. All you have to do is 
use the notation with the braces { and }. 


For example, we can write the following: 


Creating an object using the braces notation 


var po= i lastname ¢ "Clinton", firstname "Ball Py 
console.log("The person is", p); 


This will create the object p with the lastname and firstname properties. Note that 
you can indicate the names of the properties by enclosing them in quotation marks, 

or not. So { lastname: "Clinton" } can also be written { "lastname": 
"Clinton" } by surrounding the lastname property with single or double quotes. 


Now let’s see how to improve the Person class previously created by adding properties 
and methods to it. 
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Adding properties to a class 


A person has, in our example, a last name, a first name, and an age. We will create these 
three properties for people of the Person class. 


All you have to do is indicate each of these properties, by name, in the body of the 
Person class. Above all, do not use the var or let keywords to define them: 


Adding firstname, lastname, and age properties in Person class 


class Person { 
firstname; 
lastname; 


age; 


var p = new Person; 


console.log(p) ; 
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Figure 2.3 - Creation of lastname, firstname, and age properties in the Person class 


The Person class object p now has the properties added in the class. Any other object of 
this class will also have them. 


Note that the values of the added properties are undefined. This is normal because no 
values have been specified for these properties in the p object or the Person class. 


Let’s modify the Person class so that the properties have default values, rather 
than undefined: 
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Properties with default values 


class Person { 
firstname = ""; 
lastname = ""; 
age = 0; 


var p = new Person; 


console.log(p) ; 


Each property is initialized with its default value. The lastname and firstname 
properties are initialized with an empty string "", while age is initialized by default to 0. 


cs.) Terminal 


Figure 2.4 — Properties with default values 


A class has properties, but also methods. Now let’s see how to add methods to a class. 


Adding methods to a class 


You can add methods to a class. Objects created from the class (with new) will be able to 
use these methods directly. 


For example, let’s create the display () method, which displays a line of text containing 
the person's first and last name. The instruction p.display () (assuming that p is 

a Person class object) is used to display the last name and first name of the person 
related to the object p: 


Creating the display() method in the Person class 


class Person { 
// class properties 


iiesicaeMie = Ws 
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lastname = ""; 


age = 0; 


// class methods 
display() { 
console.log("The person's lastname is = " + 
this.lastname + 


", firstname = " + this.firstname) ; 


var p = new Person; 
console.log("Variable p = ", p); 
p-display(); // use of the display() method on the p object 


The properties of the class are accessible in the methods of the class by prefixing 
them with the keyword this. For example, this. lastname provides access to the 
lastname property of the class. 


The this keyword refers to the object itself that uses the display () method, so here, 
the p object. 


If you omit the this keyword and use the lastname property directly, you will get 
a syntax error because the property is only accessible with the this keyword. 


The output of the preceding code snippet is displayed here: 


ic.) Terminal 


Figure 2.5 — Using the display() method 
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The display () method displays firstname and lastname of the person associated 
with the variable p, but since lastname and firstname have been initialized to an 
empty string, no last name or first name is displayed. Let’s look at how to modify the value 
of a property. 


Changing an object's property values 

You can modify the value of the properties of an object by using these properties directly, 
for example, p . lastname allows you to read or modify the value of the lastname 
property for the object p: 


Initialization of the lastname and firstname of the person 


class Person { 
// class properties 
lastname = ""; 
GaaSitaamew— eae 


age = 0; 


// class methods 


display() { 
console.log(" The person's lastname = " + this.lastname + 
"| firstname = " + this.firstname) ; 
} 
} 
var p = new Person; 
p.lastname = "Clinton"; // initialization of the lastname 


// property of the object p 
p.firstname = "Bill"; // initialization of the firstname 

// property of the object p 
console.log("Variable p = ", p); 


p.display(); 
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This is what you will see: 


ic.) Terminal 


Figure 2.6 - The lastname and firstname properties are initialized 


Once the object p has been created by the new operator, we initialize its Lastname and 
firstname properties to the values indicated. The age property is not modified here, 
and will therefore remain equal to the value 0. 


We modified the value of the lastname and firstname properties of the object 
p created using p. lastname and p. firstname. 


This modification of property values is done after the object p is created. It is possible to 
do this modification during the very creation of the object, in the new instruction. This 
requires defining a method called constructor () , which allows this initialization. 


Using the class constructor 


The constructor () method is called the constructor of the class. It is automatically 
called during each new statement if the constructor () method exists in the class. 
We define it in a class if we want to perform a specific process each time an object is 
created in this class. 


The constructor () method can have any number of parameters or none at all. The 
parameters indicated here will be used to initialize the Lastname and firstname 
properties of the person: 


Using a constructor for the Person class 


class Person { 
// class properties 
Lastname: = we: 
‘easels = Wl g 


agen = 0; 
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// class methods 

constructor(lastname, firstname, age) { 
this.lastname = lastname; 
this.firstname = firstname; 


this.age = age; 


} 
display() { 
console.log(" The person's lastname = " + this.lastname + 
", firstname = " + this.firstname) ; 

} 
var p = new Person("Clinton", "Bill"); 
console.log("Variable p = ", p); 
p-.display(); 


The constructor () method is defined by giving it the three parameters lastname, 
firstname, and age. They are transferred into the properties of the object by means of 
this.lastname, this.firstname, and this.age. 


Finally, the object p is now created by passing as parameters the values of lastname, 
firstname, and age of the person created with new. Here, age is not specified in 

parameters in the new instruction; it will therefore be an undefined value that will be 
transmitted to the constructor. 


en] Terminal 


Figure 2.7 — Using a constructor 
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We find the lastname and firstname properties initialized, but the age property is 
now initialized to the value undef ined instead of 0. To assign it another value, simply 
pass an additional value when creating the object with new. This additional value will 
represent the person's age, for example: 


Using age when creating Person class object 


class Person { 
// class properties 
lastname = ""; 
tinotnane = Ws 


age = 0; 


// class methods 
constructor(lastname, firstname, age) { 
this.lastname = lastname; 
this.firstname = firstname; 
this.age = age; 
} 
display() { 
// the age of the person is also displayed 
console.log("The person's lastname = " + this.lastname + 
", firstname = " + this.firstname + 


", age = " + this.age); 


var p = new Person("Clinton", "Bill", 33); // age is now 
// transmitted 


console.log("Variable p = ", p); 
p.display(); 
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fcn] Terminal 


Figure 2.8 - The person’s age is now transmitted 


We have seen how to create an object, by directly defining its properties and methods 
using a class. However, we can also create an object from another object. Lets see how 
to do it. 


Merging one object with another 


There may be cases when you want to create a new object from an old object. Let's see how 
to do this. 


If the object p contains a value, the statement var p2 = p does not create a new object 
p2 distinct from the object p, but only a reference p2 that points to the same value as the 
reference p. So any modification of the properties of the object p will also be visible in the 
object p2 because both point to the same memory location. 


This can be verified using the following example: 


Modifying an object in memory 


Wale jo | | lastname s VClintonat, eiicetcoeins s Mella Yg 
console.log("p (before modification of p2) =", p); 
// p = { lastname s "Clinton", firstname s "Bill" } 


var p2 = p; 
p2.city = "Washington"; 


console.log("p (after modification of p2) =", p); 
// p = { lastname : "Clinton", firstname s "Bill", 
// city : "Washington" } 


consolem log (ip 2s— Wm 2))e 
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// p2 = { lastname s "Clinton", firstname s "Bill", 
// city : "Washington"} 


Even if only the p2 object is modified, the p object is also modified because they are 
memory references that point to the same location. If the contents of the memory location 
are changed, both references see the same change. 


To avoid this situation, it would not be necessary to write p2 = p, but rather to copy 
the properties of the object p into those of the object p2, thus creating a new memory 
location. For this, JavaScript offers the spread operator, used in the form ..., which 
allows it: 


Using the spread operator ... 
var p =] | lastname = “Clinton”, firstname s "Bull" } 


console.log("p (before modification of p2) =", p); 


var p2 = { ...p}; // copy the properties of object p into 
// object p2 
p2.city = "Washington"; 


console.log("p (after modification of p2) =", p); 
consoler logi Upe eM", jo) 5 


The spread operator is used by surrounding the original object with braces { and }, and 
preceding the object with the spread operator (for example, {...p}). 


cs.) Terminal 


Documents \Node.js> 


Figure 2.9 - Using the spread operator... 


Object p is no longer modified when object p2 is modified. 
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It is also possible to write it in shortened form: 


Creating object p2 from object p, adding the city 
// to avoid writing p2.city = "Washington" 


var p2 = { ...p, city : "Washington" }; 


Now that we have looked at classes and objects and how to work with them, let’s take 
a look at an important class object: the Array class. 


Arrays 


Arrays store a collection of data, ordered according to their index. The index is also called 
the index of the array. It starts at 0 and scales up to the total number of elements in the 
array, minus 1 (0 to n-1). 


Let’s learn how to create an array first. 


Creating an array 


An array corresponds in JavaScript to an Array class object. We therefore create an array 
using the new Array instruction. 


However, since arrays are widely used in JavaScript programs, it is also possible to create 
them using a bracket notation [ and ]. This is an easier way to use them without going 
through the Array class. 


Let’s take a detailed look at these two ways to create an array (with brackets and with the 
Array class). 


Creating an array using square brackets [ and ] 


The easiest and fastest way to create an array is to use the bracket notation: 


Creating an array using square brackets 


Vials eag — Malenene W, Nrleneme AU Walenene 3V, Wnlensme 40, 
"Rlement 5"]; 


console.log(tab) ; 
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The array begins with an opening square bracket [ and ends with a closing square bracket 
] . The elements of the array are separated by a comma. We have inserted elements here as 
strings, but in fact, any type of element can be inserted into an array. 


cs.) Terminal 


Figure 2.10 - Elements inserted into an array 


Note that it is possible to create an empty array (without any elements). We write this as 
[], without indicating any element inside the square brackets. It will then be possible to 
add elements to this array. 


Creating an array using the Array class 


You can also use the Array class to create an array. The Array class includes 
a constructor in which we indicate the list of array elements, each separated from the 
next by a comma. 


The same array as before can be created by the new Array statement by writing 
the following: 


Creating an array using new Array 


var tab = new Array("Element 1", "Element 2", "Element 3", 
Uke Aum Winikewiere i)) 2 


console.log (tab); 
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Figure 2.11 - Creation of the array using new Array 


The array created is the same as before. 
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To create an empty array, simply pass no parameters to the constructor by writing 
the following: 


Creating an empty array using new Array() 


var tab = new Array(); // or new Array; 


console.log(tab) ; 


cs.. Terminal 


Figure 2.12 - Creating an empty array [ ] 


Now that weve seen how to create an array, let’s see how to access each of its elements. 


Accessing array elements 


In previous programs, we displayed the entire array, using the console. log (tab) 


statement. It is possible to access each element of the array separately. Each element can be 


accessed as follows: 
e By its index 
e Witha for () loop 
e With the forEach() method 


Let’s take a look at each of these three ways. 


Accessing an element by index 


Let’s take the previous array of five elements, that is, tab = ["Element 1", 
"Element 2", "Element 3", "Element 4", "Element 5"]: 


e The first element can be accessed by its index 0, that is, tab [0]. 
e The next one, with index 1, will be accessed by tab [1]. 


e The last one, with index 4, will be accessed by tab [4]. 
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This is how you will display each element: 


Displaying each element of the array by its index 


var tab = "Element a") "bilement 2! 5 Unlement su "hilement AU 
umkenen te Suik 


"tab =", tab); 
veado sl, eels (Ol 
Hecla] SY, wees [ak] 


console.log ( 
( 
( 
console.log("tab[2] =", tab[2] 
g ( 
g ( 
g(' 


console.log R 
console.log 


1 


r 


Wieelo lS] =t cabia 
Heeiolal SY, eea i] 
Neelo |S], =% ical [5] 


console.lo 


1 


console.lo 


1 


) 
) 
) 
) 
) 
) 


console.lo ; 


The result is displayed in the following figure: 
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Figure 2.13 - Displaying each element by its index 


The array contains five elements, which means the indices go from 0 to 4. However, to 
do a test, we also access the element with index 5. It is possible to access an index of an 
element that does not exist in the array. The result in this case is the JavaScript value 
undef ined, which means that the value of this element has not yet been assigned. 
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Note that it is possible with this access method to modify the value of an array element - 
just give it a new value: 


Modifying the value of the elements in indexes 2 and 3 of the array 


Vac tab) —  i'nillementa a") "hilement AU Unlement 3%, "Element A0, 
"Rlement 5"]; 


console.log("Array before modification") ; 


Gemysolle, Log (Meas =", (wells) g 


// modification of elements, index 2 and 3 
tab[2] = "New element 3"; 
tab [3] 


"New element 4"; 


console.log("Array after modification") ; 
console.log("tab =", tab); 


This is the result: 


ics.) Terminal 


Figure 2.14 - Modifying array elements 


Next, we will look at accessing an element with a for () or while () loop. 
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Accessing an element with a for() or while() loop 


The for () and while () loops already studied in the previous chapter allow you to 
browse all the elements of an array. The index of the loop starts at 0 (to access the first 
element of the array, the one with index 0) and ends at the last index of the array. 


To know this last index, JavaScript provides the length property in the Array class, 
which allows us to know the total number of elements of an array. The last index will be 
the one with the value Length - 1: 


Accessing array elements with a for() loop 


Wee (cals) = [|Mialleneinie aU, Malleinaae 2Y, Valea BV, Wailea 4U, 
"Rlement 5"]; 
console.log("tab =", tab); 


console.log("Access to each element by a for() loop"); 
for (var i = 0; i < tab.length; i++) console.log("tab[" + i + 
"J=", tab[i]); 


Note that the end of the loop is written by testing the value i < tab.length. This is 
equivalent to writing i <= tab.length - 1. 


cs.) Terminal 


Figure 2.15 - Accessing array elements with a for() loop 


Next, we will look at accessing an element with the forEach (callback) method. 
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Accessing an element with the forEach(callback) method 


The forEach (callback) method is a method defined by JavaScript on the Array 
class. It is used to browse the elements of an array by transmitting each of the elements 
of the array to a function passed as a parameter. The function indicated as a parameter 
therefore has access to each element of the array (and to its index if necessary). 


Callback Function 

The principle of indicating a function in the parameters of a method is very 
common in JavaScript. The function in the parameters is known as a callback 
function, which means that the actual processing to be executed is that 
indicated in the callback function. 


We show here how to use a callback function indicated in parameters of the 
forEach (callback) method. 


We use the tab array of five elements seen previously, to which we apply the 
forEach () method: 


Accessing array elements using the forEach() method 


var tab = ["Element 1", "Element 2", "Element 3", "Element 4", 
Wirnlhkemeime sk 
console.log("tab =", tab); 


console.log("Access to each element by the forEach() method"); 
tab.forEach(function(elem, i) { 
console.log("tab[" + i + "]=", elem); 


}); 


We indicate a function as a parameter of the forEach () method. This so-called callback 
function will be called automatically by JavaScript for each element of the tab array 
(which uses the forEach() method). 
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The callback function takes as its first parameter the element of the array for which the 
function is called (parameter elem), and its index (parameter i). 


cs.) Terminal 


Figure 2.16 - Accessing array elements using the forEach() method 


The result is the same as that obtained by the for () loop. However, there is a (small) 
difference that we discover right away. 


The difference between the for() loop and the forEach() method 


The previous program did not show any difference between the for () loop and 
forEach () method results to access array elements. 


To show the difference between these two approaches, let’s introduce a new element in the 
array, at index 10, knowing that the last index used during the creation of the array was 4. 
We thus create a new element that is much further away than the current last element of 
the array. How will the array react to this enlargement? 


Addition of an element at index 10 


// original array 


vac eala = hlenenitt ah a bilement 24, Hanlenanme 32, Wolenere W, 
"Rlement 5"]; 


// adding a new element in the array, at index 10 
tab[10] = "Element 9"; 
Comsolls., ike (MEala =", wells) 7 


// display the array with a for() loop 
console.log("Access to each element by a for() loop"); 


for (var i = 0; i < tab.length; i++) console.log("tab[" + i + 
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Ms", taala) y 


// display the array by the forEach() method 
console.log ("Access to each element by the forEach() method"); 
tab.forEach(function(elem, i) { 


console.log("tab[" + i+ "]=", elem); 
DE 


We add an element to the array using tab [10] = "Element 9", then display the 
contents of the array using the for () loop and then the forEach () method. 


The result is displayed in the following figure: 


ab = [ 


ccess to each element by a for() loop 
tab[@]= Element 1 
lement 2 
ement 3 
ement 4 
ement 5 


tab[16]= Element 9 
ccess to each element by the forEach() method 
Element 1 
Element 
Element 
Element 
Element 
Element 9 


: \Documents\Node. js>, 


Figure 2.17 - Adding an element at index 10 of the array 
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The display of the for () loop shows that the elements with indices 5 to 9 exist but are of 
value undefined, because effectively, no values have been inserted for these indices of 
the array. However, the indices 5 to 9 with their undef ined values are displayed by the 
for () loop. 


Conversely, the forEach() method provides the callback function indicated in 
parameters with only the array elements that have actually been affected in the array. 
This therefore avoids the elements at indices 5 to 9, which have not been assigned in 
the program. 


We have seen how to create an array, then how to access each of its elements. Let’s look at 
how to add new elements to the array. 


Adding items to the array 


Once the array has been created (empty or not), it is possible to add elements to it. We will 
mainly use one of the two following techniques: 


e Adding an element by its index in the array 


e Adding an item using the push () method 


Now let’s take a look at these two techniques. 


Adding an element by index 


This corresponds to the assignment tab[i] = value. We used it in the previous 
section by writing tab[10] = "Element 9". 


Note simply that if the index used is greater than the current number of elements in the 
array, this enlarges the array by creating elements initialized to the value undef ined. 
And if the index used is less than the number of elements in the array, it modifies the 
current value of the targeted element. 


Adding an element using the push() method 


The push () method is defined in the Array class. It allows you to add a new element to 
an array without worrying about the insertion index because it automatically inserts the 
element at the end of the array: 


Inserting an element using the push() method 


// original array 
‘ewe eela =s [Winileueiic 10, Valence 2%; Malemeae SW, Winiemeinic AW, 
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"Element 5"]; 

// insert an element using the push() method 
tab.push("Element 6"); 

console.log("tab =", tab); 


// display the array with a for() loop 

console.log("Access to each element by a for() loop"); 

fom (vear n — 07 i a telo length? tr) consolem log ("tabi a 
WS", cele lat )) 5 


// display the array by the forEach() method 
console.log("Access to each element by the forEach() method") ; 
tab.forEach(function(elem, i) { 

console.log("tab[" + i+ "]=", elem); 


p; 


The instruction tab .push ("Element 6") inserts this element at the end of the array. 
The array is then displayed using the various methods seen previously. 


ic.) Terminal 


Figure 2.18 - Adding an element using the push() method 
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We know how to add and modify elements in an array. All that remains is to know how to 
delete elements from an array. 


Deleting array elements 
JavaScript allows us to delete array elements in two ways: 
e Deleting the value of the element in the array, while retaining the element in the 
array with an undefined value 


e Removing the element itself from the array 


Let’s examine these two possibilities now. 


Deleting an element value (without deleting the element from 

the array) 

We use the delete keyword to delete the value of an element in an array. For example, 
delete tab[0] deletes the value of the element with index 0 in the array tab, by 


assigning it the value undef ined. The element is not removed from the array, which still 
has the same number of elements as before: 


Deleting the value of the element with index 0 


// original array 


Vier eela =  Mhlenente 7 hilkement 2. UElement st Vaileneme W, 
"Element 5"]; 


// delete the value of the element with index 0 
delete tab[0]; 
console.log("tab =", tab); 


// display the array with a for() loop 
console.log("Access to each element by a for() loop"); 


for (var i = 0; i < tab.length; i++) console.log("tab[" + i + 
Me, EEL) y 


// display the array by the forEach() method 
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console.log("Access to each element by the forEach() method") ; 
tab.forEach(function(elem, i) { 


console.log("tab[" + i+ "]=", elem); 


}); 


cs.) Terminal 


Figure 2.19 - Deleting the value of the element with index 0 


We see that the for () loop displays the undef ined value of the element, while the 
forEach () method no longer displays the element because its value has been deleted. 


Note 

Note that if instead of using delete tab[0],weusetab[0] = 
undefined, the forEach() method displays the element at index 0 as the 
first element of the array, because the value of the element has not actually been 
deleted but rather assigned to a new value, which here is undef ined. 


Now let’s look at the second method for removing the element from the array. 
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Deleting an element from an array 


Using the delete keyword does not delete the element from the array, which retains the 
same number of elements. 


The splice (begin, count) method defined in the Array class allows you to 
physically remove the element from the array, which will therefore have at least one 
element less after its use. 


The splice (begin, count) method includes the begin and count parameters, 
which allow you to indicate from which index you want to delete (begin parameter) the 
elements and the number of consecutive elements you want to delete (count parameter). 


So, to remove the element with index 0 from the array tab, just write tab. splice 
(O, 1): 


Removing element with index 0 in array with splice() method 


// original array 


Nene (cele) = [Millennia aU, Vnleinane 247 Valemaae BV Walenemne “iv, 
"Hlement 5"]; 


// remove 1 element from index 0 
tab.splice(0, 1); 
console.log("tab =", tab); 


// display the array with a for() loop 
console.log("Access to each element by a for() loop"); 


for (var i = 0; i a tab.length; i++) console.log("tab[" + i + 
Te", evo ([a.]] ) 5 


// display the array by the forEach() method 
console.log("Access to each element by the forEach() method"); 
tab.forEach(function(elem, i) { 


console.log("tab[" + i + "]=", elem); 


D 
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This is what you will see: 


ic.) Terminal 


Figure 2.20 - Deletion of element with index 0 


We have seen how to add and delete elements in an array. Now let’s see how to extract 
a new array from the elements present in the current array. 


Filtering elements in an array 


It is common to filter the elements of an array, for example, to keep only certain elements 
or to return new ones. The Array class has two methods—filter (callback) and 
map (callback) —that allow us to return a new array according to our conditions. 


Using the filter(callback) method 


The tab. filter (callback) method returns a new array while keeping only the 
desired elements of the tab array. 


The callback function of the form callback (element, index) is called for each 
of the elements of the array tab. It must return true if we decide to keep the element; 
otherwise, the element is excluded. A new array is returned as a result by the tab. 
filter () method, but the original tab array is not modified (unless it is assigned in 
return from the method, as in the following example). 
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Let’s use the filter () method to keep only the elements of the array whose index is 
greater than or equal to 2: 


Using the filter() method 


// original array 


Vir eadi = st henenita LW. hilkement 24, Valenane 34, Walemnere 4U, 
uellemen tes uF 


conso lertogi J amniitia MEeaDE a, wells) p 


// keep only items with index >= 2 
tab = tab.filter(function(element, index) { 
if (index >= 2) return true; // keep this element 


}); 


console.log("\nfinal tab =", tab); 


If the callback function returns true, the element is kept; otherwise, it is excluded. The 
callback function can also return false, or even return nothing, like here, and in this 
case, the element is excluded: 


pamm : 
c+.) Terminal 


Figure 2.21 - Using the filter() method 
This brings us to the end of the filter() method. 


Using the map(callback) method 


The tab.map (callback) method is used to return a new array from the elements of 
the initial tab array. Each element of the initial array is passed to the callback function of 
the form callback(element, index), which must return for each element a new 
element that will replace the original element. 
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Let’s use the map (callback) method to return a new array in which all elements have 
been capitalized: 


Using the map() method 

// original array 

var tab = ["Billement 1", “Element 2", "“Bilement 3", “Eillement 4", 
walement 54]; 

consoler Loe) (Malinaliesell (eels) Si, (Eells) ¢ 


// capitalize all elements 

tab = tab.map(function(element, index) { 
return element.toUpperCase() ; 

}); 


consoler Fogi (Waianae allom = nntb); 


The toUpperCase () method is a method defined on the String class (following 
screenshot), allowing you to capitalize the character string that uses the method. 


The result is displayed in the following figure: 


cs.. Terminal 


Figure 2.22 - Using the map() method 


We have studied in this section the use of objects of the Array class. Another class of 
objects is also widely used with JavaScript: character strings, which are represented by the 
String class. Now let’s see how to use objects of the String class. 
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Character strings 


Strings are widely used in programming languages. They are used to represent text entered 
by a user or text that will be displayed to a user. 


Creating a character string 


A character string is represented by an object of class String. But since character strings 
are widely used in JavaScript, the language allows them to be used by surrounding them 
with double quotes " and " or single quotes ' and _ '. It is also possible, for certain 
uses, to use backticks (reverse quotation marks ' and '). 


Note 
The string literal must in this case begin and end with the same type of quotes. 


Now let’s see how to create a string using these various methods. 


Creating a string literal using double or single quotes 


The easiest way to create a string literal is to use the single or double quote notation: 


Creating a string literal with double quotes 


var s = "String 1"; 


console. logs =; S) p 


Or, with single quotes: 


Creating a string literal with single quotes 


var s = 'String 1'; 
COmsole, leg (Vs SY, 5)? 
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In both cases, the character string displayed is the same. 


c+.) Terminal 


Figure 2.23 - Creating a character string 


Advantage of Having the Option to Use Single/Double Quotation Marks 
The advantage of having the possibility of using single or double quotes is 
visible if the string itself contains quotes. For example, if the string is "I '11 
love JavaScript", using single quotes to create the string will produce 
an error because the string will be assumed to end with the apostrophe in the 
word I'11. In this case, you must use double quotes to avoid the error. 


Creating a string literal using backticks 


You can also use backticks. This is useful in special cases where you want to use the value 
of variables in character strings in a simpler way. 


For example, suppose you want to display a string that uses a person’s first and last name. 
The last name and first name are in variables named lastname and firstname: 


Concatenating strings and variables 


var lastname = "Clinton"; 


Wee ialiggicimeis = Welds 


// old way of concatenating strings and variables 


ene Gol = Wileysieiaemney sic; U sh ileystcioeyae: <> 4 iraliesteiaeyne abe) ah 
firstname; 


// new way of concatenating strings and variables 


var s2 = “lastname is ${lastname}, firstname is ${firstname}`; 
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Comeolle., kos (Wgil Ss", gil) p 
console.log("s2 =", s2); 


When using reverse quotes, the + symbol is no longer used to concatenate strings and 
variables. Everything is written in a single string, and the variables are identified by the 
“symbols” $ {variable}. 


What is written between the braces { and } can bea simple variable (like here), but also 
a more complex JavaScript expression that can be calculated (for example, {a+b}). 


We can see that the two result strings are identical. 


fc. Terminal 


Figure 2.24 — Sequence of character strings and variables creating a string using the String class 


Finally, it is possible to use the String class to create the character string. The String 
class has a constructor in which the string to be constructed is indicated as a parameter: 


Using the String class 


var s = new String("I'll love JavaScript"); 


Comsiole.,ikas (MS ST, 6) z 


The following figure displays the result: 


fc. Terminal 


Figure 2.25 - Using the String class 
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The String class has properties and methods. For example, the length property lets 
you know the number of characters in the string, and thus lets you compare, for example, 
the length of two character strings. 


Let’s use the length property to display the length of the two strings created using quotes 
and the String class: 
Using the length property of the String class 


var sl = new String("I'll love JavaScript") ; 


wee S2 = Miri loye wenaseiarjoe p 
consoler logs EUME DF 
Console, log (Sa =T, S2) 7 

console.log ("s1.length =", s1.length) ; 
console.log("s2.length =", s2.length) ; 


Figure 2.26 - Using the length property of the String class 


Regardless of how the string is created, its length is the same (here, 20 characters). 
We have seen how to create a character string, now let's see how to access the characters 
that compose it. 


Accessing characters in a string 


The String class defines methods for accessing characters in the string. These 

are, in particular, the charAt (index) and slice (start, end) methods. 
charAt (index) is used to retrieve the character located at the index indicated in the 
string, starting from index 0. The maximum index is that associated with the value of 
the length property, reduced by 1. slice (start, end) breaks the string into 

a substring, by extracting the characters that go from the start index (included) to the 
end index (excluded). 
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Using the charAt(index) method 


Let’s use the charAt (index) method to display the characters of a string, one by one: 


Displaying characters from a string 


Niche g = Wie ililoy s 


console. log ("s =") (si); 


s 
for (var i = 0; i <s.length; i++) congsole.log(~s.charAt(${i}) = 
${s.charAt (i) }~); 


Notice the use of reverse quotes to display the result string. 


The result is displayed in the following figure: 


ic.) Terminal 


Figure 2.27 - Using the charAt() method 


Now, let’s look at the slice (start, end) method. 


Using the slice(start, end) method 


The preceding charAt (index) method retrieves a single character from the string, 
while the slice (start, end) method can retrieve several consecutive ones: 


Note 


Note that the slice (start, end) method does not modify the string on 
which the method applies, but rather returns a new string. The original string is 
not modified, allowing it to remain intact. 
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Using slice() on the “Hello” string 


var S = 


console. 
console. 
console. 
console. 
console. 
console. 
console. 


"Hello"; 

log ("Ss a", 8 
log(~s.slice 
log s- slice 
log(`s.slice 
log(~s.slice 
log(~s.slice 
log(~s.slice 


0,2) = Sis.gilace(@,2) } 
0,3) = ${s.slice(0,3) }> 
1,3) = S{s.eulicea(i,3)) } 


O, =) 
O,=4) 
iL, =A) 


${s.slice(0,-2) 


) 

) 

VE; 
${s.slice(0,-1)}>); 
} 
${s.slice(1,-2) } 


If the end index (second parameter) of the slice (start, end) method is negative, it 
means counting starts from the end of the string (instead of the beginning if it is positive). 


We then obtain the following result: 


pman : 
cs.) Terminal 


Figure 2.28 - Using the slice() method 


Now that we have seen how to get the characters that make up the string, lets look at how 
to modify the string. 


Modifying a character string 


To modify a string, there is only one possibility: you have to construct a new one from it. 
The original string cannot be changed directly. 


For this, we will use the previous slice () and charAt () methods, which will make it 
possible to extract parts of the original string, in order to build the resulting string. 


78 Exploring the Advanced Concepts of JavaScript 


But to search or modify parts of character strings, it is better to use regular expressions. 
We study them below. 


Using regular expressions 


Regular expressions are related to strings. They are used to check whether a string has 
a certain format (for example, the format of an email, of a telephone number, and so on), 
or to replace the characters that are in this format with others. 


For this, the String class has the match (regexp) method to check whether 
a character string has a given format and the replace (regexp, str) method to 
replace the part of the string in this format with the new string str. 


In both methods, the regexp parameter corresponds to a regular expression, the 
meaning of which we will study next. 


Checking whether a string has a given format 


The match (regexp) method is used to check whether the character string on which the 
method is used is in the format indicated in regexp. The regexp parameter is called 
a regular expression. 


Regular Expressions 


A regular expression is a sequence of characters surrounded by / and /, for 
example, /abc/. The regular expression /abc/ means that we are looking 
for the sequence of characters abc in the character string. If the string contains 
the sequence abc, the match (/abc/) method returns this sequence of 
characters as a result, otherwise it returns the value nul1. 


A full description of regular expressions can be found at https: // 
developer.mozilla.org/fr/docs/Web/JavaScript/ 
Reference/Global_ Objects/RegExp. 


Here are some examples of regular expressions with the values returned when using the 
match () method on the string "Hello": 


Using match(regexp) 


Niece § = Wire ililoy s 


Consolemlog USERS) 
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// search for "Hel" 


console.log(~s.match(/Hel/) ${s.match(/Hel/)}>); 


// search for "hel" 
console.log(~s.match(/hel/) = ${s.match(/hel/) }~); 


// search for "hel" ignoring upper/lower case 
console.log(~s.match(/hel/i) = ${s.match(/hel/i)}*); 


// search for H followed by a or b or e followed by 1 
console.log(~s.match(/H[abe]1/) = ${s.match(/H[abe]1/)}>); 


// search for He followed by 0 or 1 a followed by 1 
console.log(~s.match(/Hea?1/) = ${s.match(/Hea?1/)}~); 


// search for He followed by 0 (min) to 1 (max) followed by 1 
console.log(~s.match(/Hea{0,1}1/) = ${s.match(/Hea{0,1}1/)}>); 


// search for He followed 1 (min) to 2 (max) followed by 1 
console.log(~s.match(/Hea{1,2}1/) = ${s.match(/Hea{1,2}1/)}>); 


When the regular expression is found in the "Hello" string, the part of the string found 
is returned by the match () method, otherwise it returns nul 1. 


The i sign at the end of the regular expression indicates that uppercase or lowercase 
letters must be ignored. 


The square brackets [ and ] around a series of letters mean that only one of these letters 
is required. 


The question mark ? means that the preceding character is optional (it can be present 
or not). 


The braces {min,max} mean that the preceding character must be present at least min 
times and at most max times. 
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The result of the previous program is as follows: 


ic.) Terminal 


D 


O 


Figure 2.29 - Using regular expressions 


Note 

Writing a regular expression can sometimes be complex to formulate. The site 
https: //regex101.com/ allows you to test the regular expressions 
you want. 


A regular expression can also modify parts of character strings, using the 
replace () method. 


Replacing a part of a string with a given format 


The replace (regexp, str) method is used to replace the part of the string having 
the format of the regular expression regexp with the string str. It returns a new string, 
and the original one is not modified. If the format indicated by the regular expression is 
not found, the original string is returned with no modifications. 


Let’s take the regular expressions from the previous example and replace the string found 
with the string “abc”, thanks to the regular expressions: 


Using the replace() method 


Were Se Tello", 


console. lkas (TS ST, S)? 
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// search for "Hel" and replace with "abc" 


console.log(~s.replace(/Hel/, "abc") => ${s.replace(/Hel/, 
"abc") DE 


// search for "hel" and replace with "abc" 


console.log(~s.replace(/hel/, "abc") => ${s.replace(/hel/, 
"aba") We) 5 


// search for hel ignoring upper/lower case and replacing with 
Hi "aba" 


console.log(~s.replace(/hel/i, "abc") => ${s.replace(/hel/i, 
"aba") ee 


// search for H followed by a or b or e followed by 1 and 
// veplace with "abc" 


console.log(~s.replace(/H[abe]1/, "abc") => ${s.replace(/H [abe] 
Lf, tabet) >) 5 


// search for He followed by 0 or 1 a followed by 1 and 

// veplaced by "abc" 

console.log (`s.replace (/Hea?l/, "abc") => ${s.replace(/Hea?1/, 
Haber h=) p 


// search for He followed by 0 (min) to 1 (max) followed by 1 
// and replaced by "abc" 


console.log(~s.replace(/Hea{0,1}1/, "abc") => ${s.replace (/ 
Hea{0,1}1/, "“abc")}~); 


// search for He followed by 1 (min) to 2 (max) followed by 1 
// and replaced by "abc" 


console.log(~s.replace(/Hea{1,2}1/, "abc") => ${s.replace (/ 
Hea(i,2}1/, tabet) i y 
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The output is shown here: 


cs.) Terminal 


D: \ 


nw wt 


Figure 2.30 — Using the replace() method 


All executions of previous programs were executed immediately. We are now going to 
study how to perform deferred processing over time. 


Multitasking in JavaScript 


When you start coding in JavaScript, a question often comes up: is it possible to perform 
several processes simultaneously (what is called multitasking in computing)? This would 
be useful if a process to be executed will take a long time, so as not to block other equally 
urgent processes. 


JavaScript does not allow several processing operations to be carried out simultaneously. 
On the other hand, it is possible not to block the program (both on the client side in the 
browser, and on the server side with Node.js) by using the callback function (which 

we have already talked about when studying the forEach () method in the Accessing 
an element with the forEach(callback) method section). 


Callback Function 

A callback function corresponds to a processing function used as parameters of 
a JavaScript method or function. The callback function will be executed at the 
desired time by the method or function that uses it. 
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Node.js makes extensive use of this feature. For example, when reading a file, the 
readFile (callback) method calls the callback function as a parameter when the file 
has been read, which allows the program not to block the pending processing of the file to 
be read. 


JavaScript defines as standard two main functions that use this callback function concept: 
the setTimeout () and setInterval () functions. Both these use a callback function 
as a parameter. We'll describe these two functions next. 


Using the setTimeout() function 


The setTimeout (callback, timeout) function is used to position a processing 
function (the callback function) that will be executed when the time period expressed 
by timeout (in milliseconds) has elapsed. 


This allows you, for example, to perform processing after 5 seconds (that is, 5,000 
milliseconds). You can execute other instructions while waiting for this delay, so the 
program is not blocked during this time: 


Processing instructions after a delay of 5 seconds 


console.log("Before setTimeout ()") ; 
setTimeout (function() { 

console.log("In the callback function") ; 
}, 5000); // 5000 milliseconds, or 5 seconds 
console.log("After setTimeout ()"); 


We display a message ("Before setTimeout () ") in the console at the start of the 
program. We program a delay of 5 seconds, after which a callback function is triggered, 
which displays another message in the console ("In the callback function"). 
Finally, we end the program by displaying a new message ("After setTimeout ()"). 


Let’s run this program with the node testnode.js command, for example. To test this 
program in a browser, simply place the preceding JavaScript code between the <script> 
and </script> tags of the index.html file. 
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The following screenshot shows the display after 1 second: 


©] Terminal - node testnode.js 


Figure 2.31 - Using setTimeout() 


Note that the display message of the start and that of the end follow each other, even 
though the 5-second time limit has not elapsed. This shows that the program is not 
blocked, waiting for the timeout to expire. 


The following screenshot shows the display after at least 5 seconds (when the delay used in 
the set Timeout () method has elapsed). 


ic.) Terminal 


Figure 2.32 - Display when the 5-second delay has elapsed 


We see that when the 5-second delay has elapsed, the callback function registered in the 
setTimeout () function is called automatically by the setTimeout () function. 


Lets improve the program by displaying the time when the messages are displayed. This 
makes it possible to verify that the 5-second time limit is respected: 


Displaying the time when messages are posted 


console.log(time(), "Before setTimeout()"); 
setTimeout (function() { 

console.log(time(), "In the callback function"); 
}, 5000); // 5000 = 5 seconds 
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console.log(time(), "After setTimeout()"); 


function time() { 

// return time as HH:MM:SS 
var date = new Date(); 

var hour = date.getHours() 


var min 


Il 


li 


date.getMinutes() ; 
var sec = date.getSeconds () 


LE (aowe = 10) aore = WOM a. Inverter 

aie (aa <= LO ma = WON i meae 

if (sec < 10) sec = "0" + sec; 

ieee, WY ge obg sb Met a ga 4h Wel a yee ae MM Ms 


F 


} 


The time () function is used to generate a character string that contains the time in the 
form HH:MM:SS. This time is displayed at the beginning of each message displayed in 
the console. 


The Date class used here is a JavaScript class that allows you to manage dates and to 
extract hours, minutes, and seconds. 


We now get the following: 


cs.) Terminal 


Figure 2.33 - Displaying the time when messages are displayed in the console 


We can clearly see that the callback function is executed at the end of the 5-second period 
indicated in the parameter of the setTimeout () function. 
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Using the setInterval() function 


The set Interval (callback, timeout) function is similar to the set Timeout () 
function seen previously. But instead of executing the callback function only once at the 
end of the delay (as the set Timeout () function does), the set Interval () function 
executes the callback function repeatedly by setting a new delay at the end of it. The 
callback function is therefore executed at regular intervals. The only way to stop this cycle 
is to use the clearInterval () function. 


The setInterval () function is very useful for running processes at regular intervals. 


Let’s use the set Interval () function to display, every second, the value of a counter 
initialized to 1. The counter is incremented every second: 


Incrementing a counter every second 


console.log(time(), "Start of timer"); 
Wee Coline = iLp 
setInterval(function() { 


console.log(time(), “count = ${count}~); 


count++; 
}, 1000); // 1000 = 1 second 
function time() { 


// return time as HH:MM:SS 
var date = new Date(); 
var hour = date.getHours() ; 


var min = date.getMinutes(); 


var sec = date.getSeconds() ; 


de (aowe < LO) Morie = WOW m INOUN 

ae (moia = LON moia = WOW 45 Ene 

ie (ee < 10) see = VOU sec; 

meee, Wi as Inne de Wo ae quilt a Wow a: GOG a Wo We 
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This is what you will see: 


w| Terminal - node testnode.js 


W N e 


4 
6 


co 


Figure 2.34 - Incrementing a counter every second 


The counter increments every second, indefinitely. To stop this endless cycle, you have to 
use a new JavaScript function, which is clearInterval (). 


Using the clearinterval() function 


The clearInterval (timer) function is used to stop the cycle started during the 
setInterval () instruction. 


Note 

Note that multiple timers can be started by multiple calls to the 
setInterval () function. So the clearInterval (timer) function 
must specify which timer it wants to stop: the timer parameter is used to 

tell it. 


To do this, the set Interval () function returns the timer parameter 
that will be used when calling the clearInterval (timer) function. 
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Let’s use the clearInterval () function to stop the timer when the count counter has 
reached the value 5: 


Using the clearInterval() function to stop the timer 


console.log(time(), "Start of timer"); 
vere Coline = ile 
var timer = setInterval(function() { 
console.log(time(), ~count = ${count}>) ; 
if (count == 5) { 
clearInterval (timer); // timer stop 
console.log(time(), "End of timer"); 
} else count++; 
}, 1000); 


function time() { 

// return time as HH:MM:SS 
var date = new Date(); 

var hour = date.getHours(); 
var min = date.getMinutes(); 


var sec = date.getSeconds() ; 


aie (owa << L0) aovi = WOW o AOU 

dwe (mia << LOY ma = WOW 4s mae 

ie (sec < 10) see Ss TO" = SEG; 
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} 


The program of the callback function is modified: as soon as the counter reaches 5, the 
timer is stopped. Otherwise, the counter is incremented by 1. 
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Check that the count stops after 5 times: 


cs.) Terminal 


Figure 2.35 - Timer stops after 5 counts 


The callback function that is used in the set Timeout () or set Interval () functions 
is included directly in the parameters of each function. JavaScript makes it easier to write 
callback functions by using a new type of object called a promise. 


Using promises 


Promises are another way to use callback functions. Rather than integrating the callback 
function into the method call (as a parameter), we use it as a parameter of the new 
then (callback) method. This simplifies the reading of JavaScript code in case it 
uses callback functions. 


For an object to use the then (callback) method, it must be a Promise class object. 
The Promise class is a class defined in JavaScript language. 


The Promise Class 


A Promise class object uses a callback function of the form 
callback (resolve, reject) asa parameter of its constructor. 


The resolve and reject parameters are functions, which will be called from the 
promise’s callback: 


e When the resolve () function is called, it triggers the then (callback) method. 
e When the reject () function is called, it triggers the catch (callback) method. 
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The resolve () function must be called, otherwise the then (callback) method 
cannot be executed. On the other hand, calling the reject () function is optional, and if 
it is not used, the catch (callback) method will not be called (and therefore does not 
have to be present in the program). 


Thanks to the resolve and reject parameters, we therefore have the possibility of 
executing the cases of success (with the then (callback) method) and the cases 

of failure (with the catch (callback) method). This way of writing ensures more 
readability of the JavaScript code. 


To illustrate this, let’s take the example of the set Timeout (callback, timeout) 
function seen previously. The callback function is included in the method call here, which 
we want to avoid with promises. Let’s write the new wait (timeout) method that can 
be used in the form wait (timeout) .then (callback). The callback function is now 
externalized from the wait () method. 


The callback function registered in the then (callback) method will be called when 
the timeout expires. 


This form of writing is more readable than the previous one with set Timeout (), 
because it thus shows the delay before a process is executed. 


To achieve this, the wait (timeout) method must return a Promise object: 


Creating the Promise object, then using the then() method 


function time() { 

// return time as HH:MM:SS 
var date = new Date(); 

var hour = date.getHours(); 
var min = date.getMinutes(); 


var sec = date.getSeconds() ; 


aie (owe < LO) hov = TOU 4 levee 

ae (alia, < NO) iain = VOW 4 ilies 

ia (See = 10) seer — o sec; 
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} 


function wait(sec) { 
return new Promise(function(resolve, reject) { 


setTimeout (function() { 
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resolve(sec); // triggers the then() method 
}, sec*1000) ; 


BE 


console.log(time(), "Start of timer"); 
wait (2) .then (function (sec) { 
console.log(time(), `End of timer of ${sec} seconds`); 


}); 


The wait () method returns a Promise object thanks to the return new 

Promise () statement. In the callback (resolve, reject) function, we call the 
resolve () function when we consider that the then () method can execute, here at the 
end of the timeout. 


It is possible to specify arguments for the resolve () and reject () methods. 

These arguments will be used in the callback functions used in the then (callback) 

or catch (callback) methods. For example, here, we call the resolve (sec) method, 
which allows us to use the sec parameter in the callback function of the then () method. 


Note 

Notice that the reject () function is not used in our example because no 
error cases can occur here. The resolve () function must, however, be 
called; otherwise, the then () method will never be executed. 


The time () function is used to display the times of each process to check that the 
execution is correct. 


cs.) Terminal 


Figure 2.36 - Using the then() method 
This brings us to the end of the chapter. 
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Summary 


In this chapter, we went through advanced concepts related to JavaScript. 


We learned how to use classes and objects, particularly the Array and St ring classes. 
We also saw how to delay the execution of instructions. 


In the rest of the book, we will discover the use of the Vue.js JavaScript library associated 
with the client side of application development. 


We will see how the knowledge obtained here will allow us to use this language in aspects 
of client-side and then server-side programming. 


Part 2: 
JavaScript on 
the Client-Side 


In this part, we discover the use of JavaScript in a browser (so-called client-side). We will 
learn how to use the Vue.js library to build JavaScript apps on the client-side. We also 
build a list management application (small but representative of the reality). 


This section comprises the following chapters: 
e Chapter 3, Getting Started with Vue.js 
¢ Chapter 4, Advanced concepts of Vue.js 
e Chapter 5, Managing a list with Vue.js 


3 


Getting Started 
with Vue.js 


The JavaScript world is constantly changing. In recent years, a new concept has emerged: 
that of developing applications by creating components. 


New JavaScript libraries for developing component-based apps have emerged, the main 
ones being Angular, React, Svelte, and Vue.js. Among all these libraries, which are quite 
similar to each other, we have chosen to present Vue.js to you because it is widely used 
and quite simple to implement. The other libraries mentioned operate according to the 
same principles. 


Why Use Vue.js? 


The main advantage of Vue.js is the possibility of developing an application 
using components. We cut the web application into a set of components 
(actually JavaScript files) and then assemble them to form the final application. 
Vue.js can test each component independently of the others and can also reuse 
them in other applications. 


In this chapter, we will study how to build our first application with Vue.js, by creating and 
using our first component. 
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In this chapter, we will cover the following main topics: 


Using Vue.js in an HTML page 
Creating our first Vue.js application 
Using reactivity 

Creating our first component 
Adding methods in components 
Using attributes in components 


Using directives 


Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript-from-Frontend-to-Backend/blob/main/ 
Chapter%203.zip. 


Using Vue.js in an HTML page 
To use Vue.js in an HTML page, simply insert the library file into it using 
the <script> tag. 


To check that Vue.js is correctly integrated into the page, let's display the version number 
of the library in the Vue . version variable: 


Displaying Vue.js version number (index.html file) 


<html> 


<head> 
<meta charset="utf-8" /> 


<script src="https://unpkg.com/vue@next"></script> 


</head> 


<body> 
</body> 


<script> 


alert ("~Vue.version = ${Vue 


.version}~); 
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</script> 
</html> 


If Vue.js is accessible in the page, the Vue object provides access to the version number in 
its version property as we can see in the following figure: 


File Edit View History Bookmarks Tools Help 


ğ ~ /D:/Documents/javascript/ind X + 


se x O file:///D:/Docu ments/javascrip vv 


@ file:// 


Vue.version = 3.2.26 


Figure 3.1 - Displaying the Vue.js version number 


Now that we have integrated Vue.js into our HTML page, let’s go about creating our 
first application. 


Creating our first Vue.js application 


Once Vue.js has been inserted into the HTML page, you must define the HTML elements 
of the page in which Vue.js will be used. 


In general, you want to use Vue.js on the whole HTML page, but it is possible to use it 
only on certain elements of the page as well. This would allow us, for example, to manage 
an HTML page with jQuery, except for a particular <div> element, which would be 
managed with Vue.js. 


To illustrate this, let us create an HTML page with two <div> elements, only the first of 
which will be managed by Vues: 
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Creating an HTML page partially managed by Vue.js 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
</head> 


<body> 
<div id="app">First div</div> 
<div>The rest of the page is not managed by 
Vue.js</div> 

</body> 


KKoneal oe > 


var app = Vue.createApp ({ 


template : "This div is managed with Vue.js" 


}); 


// mount the Vue.js application on the <div> having the 
// id "app" 
var vm = app.mount ("div#app") ; 


</script> 


</html> 


In the preceding code, we have used the Vue. createApp (options) method 

defined on the Vue object. The opt ions object is used to set options for creating the 
Vue.js application. One of the options of Vue. createApp (options) is the template 
option, which allows us to define the view (that is to say the HTML display) that will be 
displayed on the page, thanks to the call of the app . mount (element) method: 


e The app object is the one obtained as a result of the Vue. createApp () 
method call. 


e The element parameter represents the HTML element on which Vue.js will act. 
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Let’s run the previous program; we should see the following output: 


File Edit View History Bookmarks Tools Help = o x 


/D:/Documents/www/javascript/in X + 


€ CD ffile:///D:/Documents/www/jav YF >X 


This div is managed with Vuejs 
The rest of the page is not managed by Vue.js 


Figure 3.2 — First Vue.js app 


On the preceding screen, we can see the result of using Vue.js on the page. The content 
of the first <div> is replaced by the template written in the options parameter of the 
Vue.createApp (options) method. The second <div> is not transformed. 


Thus, to manage an entire HTML page with Vue.js, just indicate in the <body> part of the 
page a single <div> element, which will be the one on which Vue.js will be activated. 


Now let’s see how to use an important concept of Vue.js, which is the correspondence 
between the variables defined in the program and their display on the HTML page. 
This concept is called reactivity. 


Using reactivity 
One of the objectives of Vue.js is to separate the management of the display (the view) and 


that of the data (the model). This is the concept that is frequently found in what is called 
the Model View Controller (MVC) model. 


To illustrate, suppose we want to display a counter that increments from 0. A good 
separation of view and model would be for the view to constantly display the value of the 
counter, even if that value is changed elsewhere. This concept makes it possible not to 
link the display with the management of the data displayed. For this, we use the reactivity 
offered by Vue.js, by creating so-called reactive variables. 
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Reactive Variables 


A variable will be said to be reactive if its modification in memory causes it to 
be modified automatically wherever the variable is displayed. 


Reactive variables are defined in the options object of the Vue. createApp (options) 
method. For this, we add in the options object, and the definition of the data () 
method, which will have to return an object containing the so-called reactive variables 

of the application. 


Let’s use a reactive variable named count in our Vue.js application: 


Defining a count reactive variable 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
</head> 


<body> 
<div id="app"></div> 
</body> 


<script> 


var app = Vue.createApp ({ 
template : "The counter is: {{count}}", 
data() { 
// return an object containing the reactive 
// variables 
return { 


count : 0 


}); 


var vm = app.mount ("div#app") ; 
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</script> 


</html> 


In the preceding code, the count reactive variable is defined in the data () method, 
which returns the { count : 0 } object containing the program's reactive variable. 
Other variables can be defined afterward. 


This reactive variable can then be used in the template by means of the notation with 
{{ and }}. This notation is used to indicate a JavaScript expression, such as the value 
of a variable. 


The definition of a so-called reactive variable makes it possible to link the display to the 
value of the variable. As soon as the variable is modified, the display is also modified. 
We can see the counter value in the following figure: 


[File Edit View History Bookmarks Tools Help - gx 
/D:/Documents/www/javascript/in X + 
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The counter is: 0 


Figure 3.3 - Displaying a reactive variable 


The counter remains positioned at its initial value: 0. Reactivity is only visible when the 
variable is modified. The display will therefore be modified as soon as the count variable 
is modified. 


To do this, let’s increment the value of the variable every second as shown in the 
following code: 


Incrementing count variable every second 


<html> 
<head> 
<meta charset="ut£-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
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</head> 


<body> 
<div id="app"></div> 
</body> 


cas\oneal| oe 


var app = Vue.createApp ({ 
template : "The counter is: {{count}}", 
data() { 
// return an object containing the reactive 
// variables 
return { 


Cowie s © 


DE 
var vm = app.mount ("div#app") ; 


setInterval(function() { 
vm.count += 1; 
}, 1000); 


</script> 


</html> 


Using JavaScript’s set Interval () function, we increment the value of the count 
variable every second. Vue.js provides access to the count variable using vm. count, 
where vm is the object returned by the app . mount () method. Reactive variables become 
properties of this vm object. In the preceding code, we can see the separation of view and 
data processing, as advocated by the MVC pattern. The incrementation of the variable is 
done outside the view, which would not have been possible with a library such as jQuery. 
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We can see the incrementation and the automatic update of the display, thanks to the 
reactivity offered by Vue.js, as evident in the following figure 


(File Edit View History Bookmarks Tools Help za Oo x 
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The counter is: 5 


Figure 3.4 - Incrementing a reactive variable 


The previous program is very simple, but in reality, applications are of course more 
complex. As such, it is necessary to break down an application into small pieces, which 
will then be assembled. Now let’s learn how to write one of the small pieces of an 
application, called a component. 


Creating our first component 


Let’s see how to use Vue.js to create our own components. 


A Vue.js component will be similar to a new HTML element. It will be used in the form of 
HTML tags to which new attributes can be associated if necessary. To use the component, 
all you have to do is use the corresponding tag. 


The components are therefore a means of enriching the HTML code by creating our 
own tags. 


How to Discover the Components to Use to Build Our Application 


All you have to do is visually cut the HTML page you want to display into 

the simplest possible elements (which will be the basic components of your 
application), then group several elements together to form a component that 
will group them, and so on until you have the main component, which will be 
your complete application. 
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For example, if a list of elements is displayed on the HTML page, each element’s line of 
the list corresponds to a basic component, while the global list that groups these different 
components will be associated with another component. The set of all components of the 
HTML page corresponds to the main component, often named <App> or <GlobalApp>. 
Let’s see how to create and use the <counter> component corresponding to the previous 
counter by first learning how to insert the component. 


You can create the component directly into the HTML page or include it from an external 
file. Let’s look at these two ways to do it. 


Inserting a component in the application file 


A component can simply be embedded in the main application Vue.js file. Just use the 
app.component (name, options) method to create it as follows. The variable app 
corresponds to the object returned by Vue. createApp (): 


Creating the <counter> component directly in the application 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
</head> 


<body> 
<div id="app"></div> 
</body> 


BsKenealjoue = 


var app = Vue.createApp ({ 
template : "<counter />" 


hy 


app.component ("counter", { 
template : "The counter is: {{count}}", 
data() { 
return { 


count : 0 
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p: 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


In the preceding code, the variable app corresponds to the object returned by Vue. 
createApp (). 


The app. component (name, options) method works on the same principle as 
Vue.createApp (options): 


e The name parameter corresponds to the name of the component, which will then be 
used as tags in HTML templates. 


e The options parameter is similar in both cases. There is the template section, 
data, and so on. 


The <counter> component can then be used in other templates, including the one 
defined for the application. When you run the preceding code, you will see the 
following screen: 


[File Edit View History Bookmarks Tools Help - gp Xx 
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The counter is: 0 


Figure 3.5 - The <counter> component 


As we can see in the preceding figure, for the moment, the counter remains at 0. To 
increment the reactive variable count in the component, it is necessary to be able to write 
the instruction of incrementation once the component is created. For this, Vue.js provides 
internal methods allowing access to the life cycle of each component created. 
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One of the methods of a component's life cycle is the created () method. It is called 
when the component is created. You can use this method to write the increment of the 
variable count every second, using the set Interval () function. 


Let’s use the component’s created () method as follows: 


Using the component’s created() method 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
</head> 


<body> 
<div id="app"></div> 
</body> 


<script> 


var app = Vue .createApp ( { 


template : "<counter />" 
DE 
app.component ("counter", { 
template : "The counter is: {{count}}", 
data() { 
return { 


counta- © 


} 
Jo 
created() { 
setInterval(()=>{ // do not use the function () 
// form here, 
// otherwise the "this" object 
// would not be the same 
this.count++; 
}, 1000); 
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DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


In the preceding code, we have used the notation () => instead of function (). This 
notation (called a lambda function) was introduced in the latest versions of JavaScript in 
order to allow the value of this to be kept inside callback functions, which is necessary 
here. If you replace the lambda function () => with the function () keyword, the 
program won't work, as the this value won't be the same. 


On running the preceding code, you will see the following output: 
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The counter is: 13 


Figure 3.6 - Incrementing the counter in the component 


Inserting a component from an external file 


Rather than defining the component directly in the HTML page, it is preferable to 
define it in an external file. The component can be used in the HTML page thanks to the 
inclusion of the external file in the HTML page. For this, we use the concept of modules 
provided by JavaScript. 


The Advantage of Components Defined in an External File 

The advantage of defining the component in an external file is to be able to 
include this file in several different HTML pages, and therefore to use the 
component in several different applications. 
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The <counter> component is defined in an external counter. js file as follows: 


<counter> component definition (counter.js file) 


const Counter = { 
data() { 
return { 
count: 0 
} 
Jo 
template : "The counter is: {{count}}", 


created() { 
setInterval(() => { 
this.count += 1; 
}, 1000) 


export default Counter; 


The <counter> component is defined as an object, having template, data, and 
created properties. Its definition is similar to the one shown previously in the app . 
component () method. 


The export default Counter instruction makes the component accessible in the 
other files where this module is imported. 


The <counter> component can now be integrated into the main file of our application. 
We use the JavaScript import statement for this. The code will look as follows: 


Importing the component into the program (index.html file) 


<html> 
<head> 
<meta charset="utf-8" /> 


<script src="https://unpkg.com/vue@next"></script> 
</head> 


<body> 
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<div id="app"></div> 
</body> 


<script type="module"> 
import Counter from "./counter.js"; 


var app = Vue.createApp ({ 
components : { 
Counter:Counter 


template : "<counter />" // or “<Counter />" 


DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


In the preceding code, to import the counter . js file and use the corresponding 
component, the following takes place: 


e The type="module" attribute is indicated in the <script > tag. This allows the 
use of the import statement in the JavaScript statements of the <script> tag. 


e Weuse the import statement to import the corresponding module. 


e We declare the imported components in the new components section. 
Components are declared as an object. The names of the properties in this object 
correspond to the name used by the component in the templates (<counter> 
or <Counter>), while the values correspond to the name of the imported 
component (Counter). 
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Using HTTP Instead of the FILE Protocol 


However, as we use the import of JavaScript modules, it is necessary to run our 
application on an HTTP server, and no longer with a simple drag and drop as 
before. Hence the use of the URL that begins with http://localhost. 

If you need to know how to install an HTTP server, you can, for example, 

use the documentation here: https: //developer.mozilla.org/ 
en-US/docs/Learn/Common_questions/set_up_a_local 
testing server. 


In the following figure, we can see that creating a component directly in the HTML page 
or in an external file produces the same result: 


(File Edit View History Bookmarks Tools Help = a x 
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The counter is: 5 


Figure 3.7 - Execution of the HTML file on an HTTP server (here, localhost) 


The current component only has a simple reactive variable. It is possible, in a component, 
to add methods to it that will be used in the component. Now let’s take a look at how to 
do it. 


Adding methods in components 


We have seen how to create reactive variables in a component, using the data section of 
the component. It is also possible to create methods in a component that can be used in 
the component template. 


There are two ways to add methods to a component: 


e ‘The first is to define the method in the methods section of the component. 


e ‘The second is to create a so-called computed property that will be defined in the 
computed section of the component. 


Let’s look at these two ways to do it. 
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Defining methods in the methods section 


For each incrementation of the counter, it should be necessary to display the time at 
which it occurs. A time () function would be very useful in the component, allowing us 
to display the time in the form HH:MM:SS. This time () function will be defined in the 
methods section of the component. 


The <counter> component is modified to integrate the display of the time at the 
beginning of the line. We can achieve all this using the following code: 


<counter> component displaying time (counter.js file) 


const Counter = { 

data() { 

return { 

counto 

} 
i 
template : ~{{time()}} &nbsp;&nbsp; The counter is: 
{{count}}", 
created() { 

setInterval(() => { 


this.count += 1; 


}, 1000) 
Wee 
methods : { 
time() { 
// return time as HH:MM:SS 
var date = new Date(); 
var hour = date.getHours(); 
var min = date.getMinutes(); 
var sec = date.getSeconds(); 
if (hour < 10) hour = "0" + hour; 
if (min < 10) min = "0" + min; 
if (sec < 10) sec = "0" + sec; 
return "" + hour + ":" + min + ":" + sec + " "; 
} 
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export default Counter; 


In the preceding code, the time () method is defined in the methods section and is then 
directly used in the component template within the double braces {{ and }}. 


A method defined in the methods section can use the other methods of this section 
or the reactive variables of the data section by prefixing them with the this keyword. 


The result is displayed in the following figure: 


(File Edit View History Bookmarks Tools Help = o x 
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16:34:44 The counter is: 6 


Figure 3.8 - Time display in the component 


Vue.js allows you to define, in the form of methods, new variables that will be reactive. 
They are called computed properties. Let’s see how to create and use them. 


Defining computed properties in the computed section 


A computed property is similar to a reactive variable. It is the result of the calculation 
performed on one or more reactive variables, and it will also be reactive. Any modification 
to one of the reactive variables associated with this computed property will cause it to be 
modified immediately. 


Let’s create a count X2 property that calculates double the count variable as follows: 


Defining a computed property countX2 in the component (counter.js file) 


const Counter = { 
data() { 
return { 


Covineas O 


Adding methods in components 
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} 
Ihe 
template : ~{{time()}} &nbsp;&nbsp; The counter is: 
{{count}}, double is: {{countx2}}", 
created() { 

setInterval(() => { 

Chasm COUME = ilp 

}, 1000) 

Jo 
methods : { 

time() { 

// return time as HH:MM:SS 
var date = new Date(); 

var hour = date.getHours() ; 

var min = date.getMinutes(); 

) 


ii 


var sec = date.getSeconds ( 


aie (aowe a L0) Inoue = VOW $ aovi; 

ie (Gosia, <2 O jae, = WOM se a 

if (sec < 10) sec = "0" + sec; 
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} 

}, 

computed : { 
countx2() { 


return 2 * this.count; 


export default Counter; 
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The output of the preceding code will look as follows: 


aS a nn a 
File Edit View History Bookmarks Tools Help = m x 


localhost/javascript/ xX | + 


€ CG QO D = localhost/avascript/ YY » 


16:38:48 The counter is: 4, double is: 8 


Figure 3.9 - Using a computed property 


In the preceding figure, we can see the modification of the count variable. Every second 
leads to the automatic modification of the count X2 variable thanks to its definition in 
the computed section. 


We have seen how to define methods and reactive variables in a component. Now let’s see 
how to pass parameters to a component, using the component’ attributes for this. 


Using attributes in components 


Attributes in a component allow it to pass parameters for its use. For example, we could 
use in the <counter> component a start attribute indicating at what value we start 
counting. If this attribute is not indicated, it is considered to be 0 (that is, counting starts 
at 0 as in the preceding code example). 


For a component to be able to employ attributes during its use, it suffices to indicate the 
name of the attributes in the props section of the component. The component can access 
the attribute value using the this keyword (for example, this . start to access the 
start attribute in the component). We can see this in action in the following code: 


Using the start attribute in the component (index.html file) 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
</head> 
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<body> 
<div id="app"></div> 
</body> 


<script type="module"> 
import Counter from "./counter.js"; 


var app = Vue.createApp ({ 
components : { 
Counter: Counter 


}, 


template : "<counter start='10' />" 


hee 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


In the following code, the attribute is passed when using the component, as is traditionally 
done in HTML. The value of the attribute here will be a character string "10" and not 
the value 10: 


Setting the start attribute in the <counter> component (counter.js file) 


const Counter = { 
data() { 
return { 
count : parseInt(this.start), // we initialize the 
// count to the value 
// of start 


} 
fe 
template : ~{{time()}} &nbsp;&nbsp; The counter is: 
{{count}}, double is: {{countx2}}~, 


116 Getting Started with Vue.js 


created() { 
var timer = setInterval(() => { 


this.count += 1; 


}, 1000) 
le 
methods : { 
time() { 
// return time as HH:MM:SS 
var date = new Date(); 
var hour = date.getHours(); 
var min = date.getMinutes(); 
var sec = date.getSeconds() ; 
aie (nowe = 10) levee = TOU ss INOW 
ate moia << AL(@))) maa SS WO 2s a 
if (sec < 10) sec = "0" sec; 
martiga TM as lovee <p Well qualia gh Well a GEC a fie 
} 
i 


computed : { 
countxX2() { 
return 2 * this.count; 
} 
Jo 
props : [ 
"start" 


export default Counter; 


In the preceding code, notice the use of the parseInt () function (defined as standard 
in JavaScript) to retrieve the value of this . start in integer form. Indeed, the attributes 
are transmitted in the form of character strings, hence the need to transform this. 
start into an integer value 
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It is possible to avoid transforming the attribute value into an integer value. All you have 
to do is indicate when using the attribute that you want to keep the JavaScript value and 
not the character string. We prefix the name of the attribute with the character :, for 
example, :start='10'. In this case, the value 10 will be transmitted and not the 
string "10". 


This makes it possible to be able to transmit in the attributes any types of values: numeric 
values, character strings, arrays, or objects. 


In the following figure we can see the counter has started from the value indicated in the 
start attribute: 


z 
File Edit View History Bookmarks Tools Help 5 o x 


localhost/javascript/ x| + 


< C QO D = localhost/avascript/ Ù ©» = 


16:46:40 The counter is: 14, double is: 28 


Figure 3.10 - Using the start attribute in the component 


We have therefore seen how to create new attributes in a component. Vue.js has specific 
attributes as standard, which can be used in all components. These specific attributes, 
created by Vue.js, are called directives. We will study them now. 


Using directives 


Vue.js improves the writing of HTML code by offering to write its own components, as 
we have seen in the preceding section. The framework also makes it easier to write basic 
HTML code by adding new attributes to the HTML elements or to the components 
created. These new attributes are called directives. 


Note 


Directives are used exclusively in HTML elements or created components, that 
is, in the template section of components. 
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Their name begins with v-, so as not to be confused with other existing HTML attributes. 
The main directives are v- if, v-else, v- show, v- for, and v-model. They will be 
explained now. 


The v-if and v-else directives 


The v-if directive is used to specify a condition. If true, the HTML element (or 
component) will be inserted into the HTML page. Otherwise, it will not be present. 


Let’s use the v-if directive to indicate that we want to display the value of the counter 
only for values less than or equal to 20. As soon as the value 20 is exceeded, the counter is 
no longer displayed. 


In the following snippet, we have only indicated the code of the template section of the 
component, knowing that the rest is not modified: 


Using the v-if directive 


template 
{{time()}} &nbsp;&nbsp; 


<span v-if='count<=20'>The counter is: {{count}}</span> 


, 


Using backticks ' and ' to define the template avoids having to manage the concatenation 
of character strings on several lines. 


The <span> element on which the v- if directive is applied will be included in the 
HTML page only if the following condition is true: if count <=20. Beyond 20, only the 
time will be displayed without the counter value. 


As long as the counter is less than or equal to 20, it is displayed as follows: 


[File Edit View History Bookmarks Tools Help = m x 


localhost/javascript/ x + 


< © O D = localhostfavascript/ Y » 


16:55:01 The counter is: 4 


Figure 3.11 - Display of the counter whose value is less than 20 
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When the counter exceeds the value 20, it is no longer displayed: 


(File Edit View History Bookmarks Tools Help = o x 
localhost/javascript/ Xx fie 

= CG Ọ D = localhostfavascript) © = 
16:55:17 


Figure 3.12 - Display as soon as the counter exceeds the value 20 


The v-else directive is used to indicate an alternative when the condition expressed in 


v-if is false. The element on which the v-else directive is used will be inserted into 


the HTML page if the condition expressed in v-if is false. 


Let’s use the v-else directive to display another message when the counter exceeds the 


value 20: 


Using the v-else directive 


template : `^ 
{{time()}} snbsp;&nbsp; 
<span v-if='count<=20'>The counter is: {{count}}</span> 
<span v-else>The counter has exceeded 20, it is: 
{{count}}</span> 


& 
, 


When the counter exceeds the value 20, we now get the following: 


I File Edit View History Bookmarks Tools Help ae, o x 


localhost/javascript/index.html x + 
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12:18:31 The counter has exceeded 20, it is: 32 


Figure 3.13 - Counter having exceeded the value 20 
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The v-show directive 


The v- show directive is similar to the v- if directive. A condition is given next. If the 
condition is true, the element that uses the directive is displayed; otherwise, it is not. 


The difference from the v-if directive is that the element, if not displayed, is only 
hidden, but it is still inserted into the page. Whereas with the v- if directive, the element 
is not inserted (if the condition is false). 


The v-for directive 


The v- for directive allows you to loop over a set of elements or over the properties of an 
object. For each iteration of the loop, it inserts the HTML element on which the directive 
is positioned. 


Let us assume the <counter> component is a set of counters associated with the variable 
counts, which is a JavaScript array. Each counter is, in our example, a character string 
(for example, "Counter 1"), and we want to display the whole in the form of a list 

(see the following code snippets). 


Let’s look at the two possible forms of the v- for directive. 


Using the directive v-for="count in counts” 


Let’s use the first form of the v- for directive. It allows access to each element of the array 
indicated in the directive (in our example, the JavaScript counts array): 


Displaying counters as a list (counter.js file) 


const Counter = { 
data() { 
return { 
Coline 3 ("Coiiniker 1”, VCetineeie 20, MCowinEeie 2" 
"Counter 4", "Counter 5"] 
} 
ĵo 


template 
< 
<li v-for="count in counts"> 
<span>{{count}}</span> 
</li> 
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</ul> 


export default Counter; 


In the preceding code, we have positioned the v- for directive on the element that 

we want to repeat (in this case, the <1i> element). The value associated with the v- for 
directive is a character string of the form "count in counts", knowing that counts 
is the variable on which we are iterating. The count variable thus corresponds to each of 
the elements of the counts array: 


[File Edit View History Bookmarks Tools Help me o x 


localhost/javascript/ xX | + 


ST C Ọ D = localhostjavascript/ Ù% » 


e Counter 1 
e Counter 2 
e Counter 3 
e Counter 4 
e Counter 5 


Figure 3.14 - Using the v-for directive 


Using the directive v-for="(count, index) in counts” 


A second form of the v- for directive gives access to each element of the array as before, 
but also to its index (starting from 0): 


Displaying counters and their index (counter.js file) 


const Counter = { 
data() { 
return { 
counts = ("Counter 1", “Counter 2", “Counter 2; 


"Counter 4", "Counter 5"] 
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} 
ie 
template . 
<ul> 
<li v-for="(count, index) in counts"> 
<span>Index {{index}} : {{count}}</span> 
</li> 
</ul> 


export default Counter; 


On running the preceding code, the following is displayed: 


| File Edit View History Bookmarks Tools Help =e o x 
localhost/javascript/ x + 


€ C ORDER localhost/javascript/ YF >» 


e Index 0 : Counter 1 
e Index 1 : Counter 2 
e Index 2 : Counter 3 
e Index 3 : Counter 4 
e Index 4 : Counter 5 


Figure 3.15 - Using index in the v-for directive 


Using the key attribute with the v-for directive 


The v- for directive can also be used to display large lists, for which reactivity must be 
maintained. That is, changing the reactive variable specified in the v- for directive should 
update the corresponding displayed list. 


To perform the update as quickly as possible, Vue.js uses a special attribute (to be used 
only for this specific case) named key. This attribute can be positioned after the v- for 
directive. Its value must be unique for each item in the list. For example, the value of the 
index being unique for each list element can be used as a value in the key attribute: 
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Using the key attribute with the v-for directive 


<li v-for="(count, index) in counts" :key="index"> 


In the preceding code, the value of the attribute is a JavaScript expression (the variable 
index). We use : key and not just key; otherwise, the attribute would constantly have 
the string "index" as its value (instead of the value of the variable index). 


Of course, adding the key attribute does not produce any display changes, but the 
performance will be visible on subsequent changes to the displayed list (it helps Vue.js to 
keep track of the element and prevent unnecessary re-rendering). 


The v-model directive 


The v-model directive is used to manage form elements during an interaction (input in 
a field, a click on a checkbox or radio button, the choice of an element in a list). 


The v-model directive is used to immediately retrieve the result of input or selection in 
a reactive variable without having to perform any particular processing. It’s the v-model 
directive that performs this update (of the reactive variable) for us. 


We use the v-model directive in the form v-model="varname", where varname is 
the name of a reactive variable that will be updated on input or selection. 


Let’s use the v-mode1 directive in a form input field. To clearly see what happens 
with or without its use, we display two input fields: one managed without v-model, the 
other with: 


Using the v-model directive in an input field (counter.js file) 


const Counter = { 
data() { 
return { 


Count = 20) 


} 
}, 
template 
Without v-model: 
<input type="text" :value="count" /> &nbsp;&nbsp; 


count = {{count}} <br><br> 
With v-model: 
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<input type="text" v-model="count" /> &nbsp;&nbsp; 


count = {{count}} 


export default Counter; 
Here are some notes on the preceding program: 


e ‘The first <input > field does not use v-model1, but only uses the value attribute, 
which will be updated based on the count variable. 


e The second <input > field uses the v-model directive associated with the same 
count variable. 


e The value of the count variable is displayed after the two input fields. 
When the program is launched, the value of the reactive variable count is transferred 


to the value attribute of the first input field, as well as to the second. This produces the 
initialization of the contents of the two input fields as seen here: 


(File Edit View History Bookmarks Jools Help —- op x 
localhost/javascript/ x ie 

e€ > © Ọ D = localhostjavascrip/ Ù% © = 
Without v-model:[10 | count=10 

With v-model: |10 | count=10 


Figure 3.16 - Display when starting the program 
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If we change the contents of the first input field (which is not used with v-model1), 
we will see something like this: 


File Edit View History Bookmarks Tools Help 


localhost/javascript/ x + 


e€ > © Ọ D = localhost/avascript/ Ù » 
Without v mode aoad) coun = 10 
With v-modet count =10 


Figure 3.17 - Editing an input field without v-model 


Note that modifying the input field (without v-mode1) has no effect on the reactive 
variable associated with it. 


Now lets modify the contents of the second input field, managed by v-model: 


File Edit View History Bookmarks Jools Help — o x 
localhost/javascript/ x + 

= C Ọ D = localhostfavascript/ Y X = 
Without v-model: | 100000 | count = 100000 


With vmod o0 —] count = 100000 


Figure 3.18 - Editing an input field with v-model 


We now see that the use of v-model causes the immediate modification of the reactive 
variable to which it is associated, which then causes the modification of the value 
attribute of the first input field (because it is linked to the reactive variable). 
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Summary 


In this chapter, we have mainly studied how to create a component and methods 
or attributes associated with it. 


It is now necessary to study how to manage the actions of the user in a component, 
then how to assemble the components to form an application. 


4 


Advanced Concepts 
of Vue.js 


In this chapter, we look at advanced uses of Vue.js. We will study the handling of events 
in components, then the assembly of the various components in order to form a whole 
Vue.js application. 


Why is it important to know how to handle events in components? 


A Vue.js component is often a set of HTML elements, like building blocks, such as 
buttons, lists, and input fields. It is therefore essential to know how to manage the 
interaction of these elements with the possible actions of the user, such as clicking on 
a button, entering a value in an input field, or selecting an element from a list. 


Similarly, why is it important to know how to assemble the components? 


A web application brings together many elements, which in the end, will represent 

the application as a whole. The principle of Vue.js is to break down an application into 
components, then assemble them to form the complete application. We will have to learn 
how to divide an application into components, then assemble them by allowing them, 
for example, to share data. 


We end this chapter by showing how we can easily produce visual effects on your pages 
thanks to Vue.js. 
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Here are the main topics we explain in the following pages: 


e Managing events 
e Assembling components 


e Using visual effects 


Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript-from-Frontend-to-Backend/blob/main/ 
Chapter%204.zip. 


Managing events 


Now let’s see how to handle events with Vue.js. To do this, use the v-on directive, 
followed by the character : and the name of the event to be handled. For example, if you 
want to perform a particular process when a button is clicked, we will use the click 
event on the button and we will write v-on: click to handle the click event. The value 
of the directive (which follows the = sign) corresponds to the JavaScript expression to be 
executed (either a statement or a function call). 


Tip 
Vue.js makes it easier to write v-on: click by writing @click more 
simply. This rule is valid for all events. 


In this example, we will implement a button that increments a reactive variable count 
on each click. We will also define an incr () method in the methods section of the 
component that increments the count variable: 


Increment counter count (counter.js file) 


const Counter = { 
data() { 
return { 
commit = © 
} 
E 


template 
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<button @click="count++">Increment counter by 
count++</button> 


snbsp;é&nbsp; count = {{count}} <br><br> 
<button @click="incr()">Increment counter by 
incr () </button> 


&nbsp;&nbsp; count = {{count}} 


z 


methods : { 
ince 


this.count++; 


export default Counter; 


We have defined two buttons for which the value of @click is as follows: 
© @click="count++" (first button) 
e @click="incr () " (second button) 

We thus show the equivalence of these forms of writing. 


The counter is incremented by 1 with each click of the buttons. 


(File Edit View History Bookmarks Tools Help = o x 


localhost/javascript/ x + 


= C O D = localhost/avascript/ Ù » 


Increment counter by count++ count = 12 


| Increment counter by iner()| count = 12 


Figure 4.1 - Button click management 
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It is possible to write several method calls in a row during the processing to be performed 
(separated by a comma or a semicolon). It is enough that these methods are defined in the 
methods section of the component. 


For example, @click="incr() ; incr ()" allows the incr () method to be executed 
twice each time the button is clicked. 


We have explained here how to catch an event and handle it in a method defined in the 
methods section of the component. Let’s go further by using the parameters transmitted 
in the received event, for example, knowing which key on the keyboard was pressed. 


Using the $event parameter 


Vue.js provides access to the Event object associated with the event. This object can 
then be used to get additional information about the event. The information is different 
depending on the type of event: 


e Mouse coordinates or buttons clicked on the mouse for a mouse-related event 


e Keyboard key used, or the combination of keys pressed (Ctrl, Shift, Esc, and so on) 
for a keyboard-related event 


The Event object can be accessed from the $event variable. It can be passed as 
a parameter to a processing method. This parameter will then be retrieved in the event 
processing function. 


Let’s see two examples of how to use this parameter when entering characters in an 
edit control: 


e By displaying an error message as soon as the numerical value entered equals 
or exceeds the value 100 


e By prohibiting the entry of characters other than numeric characters if the edit 
control can only contain numbers (this is an improvement of the previous example) 


Checking that the entered value is less than 100 


Let’s use the Sevent parameter to check that the content of the counter input field is 
less than 100. If so, the count variable is updated with the entered value; otherwise, an 
error message is displayed. 


To achieve this, we use the blur event on the input field, and in the processing of the 
event, we retrieve the value of the input field. A reactive message variable is used to 
display an error message, if necessary: 
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Note 
The blur event is triggered when leaving the input field, for example, by 
clicking outside the input field. 
Display an error message if the counter is greater than 100 (counter.js file) 
const Counter = { 
data() { 
return { 
counti mor 
message : "" 
} 
E 
template 
count (less than 100): <input type="text" 
:value="count" @blur="valid($event)" /> 
&nbsp;&nbsp; count = {{count}} 
<br><br> 
<span>{{message}}</span> 
methods : { 
valid(event) { 
this.message = ""; // reset of the error message 
// before each check 
if (event.target.value < 100) this.count = 
event.target.value; 
else this.message = "Error: count must be less than 100"; 


export default Counter; 


The Sevent parameter is passed to the valid (event) processing function. The 
event .target property provides direct access to the HTML element. Its value 
property contains the value of the field. 
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If you type a value less than 100 (here, 45), the counter is updated: 


[File Edit View History Bookmarks Tools Help = o x 
localhost/javascript/ x + 
< C Ọ D = lbocalhost/avascript/ Y X = 
count (less than 100): |45 | count=45 


Figure 4.2 - Entering an authorized value 


If you type a value greater than 100 (for example, 150), an error is displayed and the old 
value of the counter (45) is restored. 


[File Edit View History Bookmarks Tools Help = o x 
localhost/javascript/ x | + 

= G OD = localhost/javascript)  » = 
count (less than 100): | 45 | count = 45 

Error: count must be less than 100 


Figure 4.3 - Entering a prohibited value 


Then, we'll look at another use of Sevent parameter-allowing only digits to be entered. 


Allowing only digits to be entered 


Another use of the $event parameter can be to only allow numbers to be entered into 
the field. Other keyboard keys are prohibited (except the Backspace and Delete keys, the 
right and left arrow keys, and the Tab key). 
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For this, we use the keydown event, which is triggered each time a key on the keyboard 
is pressed: 


Disallow input of non-numeric characters (counter.js file) 


const Counter = { 
data() { 
return { 
COude e 0, 


message : "" 


} 
E 
template 
count (less than 100): 
<input type="text" :value="count" @blur="valid(Sevent) " 
@keydown="verif ($event) "/> 
snbsp;é&nbsp; count = {{count}} 
<br><br> 
<span>{ {message} }</span> 


methods : { 
valid(event) { 
this.message = ""; // reset of the error message 
// before each check 
if (event.target.value < 100) this.count = event.target. 


value; 
else this.message = "Error: count must be less than 100"; 
e 
verif (event) { 
console.log(event.key) ; // display in the console 
// the value of the key 
// pressed 
if (event.key != "Backspace" && event.key != "Delete" 
&& 
event.key != "ArrowLeft" && event.key != 


"ArrowRight" && 
event.key != "Tab") { 
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// forbid the key if it is not numeric 
if (event.key < "0" || event.key > "9") 
event.preventDefault(); // forbidden key 


export default Counter; 


The event used to filter the keys corresponds to keydown and gets activated when 
pressing a key on the keyboard. We therefore indicate to process each key press using the 
verif () method defined in the methods section. 


Using event.key and event.preventDefault() 


The event . key parameter contains the code of the key pressed. The key 
code is between “0” and “9” for a numeric value. To prohibit the other keys, 

we use the event .preventDefault () method (defined in JavaScript), 
which indicates not to take into account the event, therefore the pressing of the 
prohibited key. 


We learned how to create a component in Chapter 3, Getting Started with Vue.js, and how 
to manage events in it (at the beginning of this chapter). A full application is composed of 
several components. Let’s now explain how to proceed to assemble several components to 
form a complete application. 


Assembling components 


Vue.js divides an application into a set of components. These components are then 
assembled to form the final application. 


Let’s study an example of how to create components and then assemble the created 
components. The goal is to use three counters (associated with three input fields) like the 
one in the previous example, then display the total of these counters. The total updates, 
as numbers are typed into each of the input fields. 
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We will create two components for this: 


e The <counter> component is used to manage a counter. 


e The <counters> component allows you to manage the three counters together 
and display the total. 


The index.html file will display the <counters> component in its template section: 


index.html file 


<html> 
<head> 
<meta charset="utf£-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
</head> 


<body> 
<div id="app"></div> 
</body> 


<script type="module"> 


import Counters from "./counters.js"; 


var app = Vue.createApp ({ 


components : { 
Counters:Counters 
template 


<counters /> 


DE 


var vm = app.mount ("div#app") ; 
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</script> 


</html> 


The included counters. js file describes the <counters> component. It partly 
repeats what has been explained in the previous sections, adding new concepts that 
we ll now describe. 


These new concepts will explain how a parent component communicates with its 
child components (thanks to attributes, called props) and how a child component 
communicates with its parent component (thanks to events and the $emit () method). 


These two concepts make it possible to assemble the components between them by 
allowing them to communicate between a child component and a parent component. 


Using $emit() to communicate with a parent 
component 


Let’s first look at the <counter> component file, which describes a counter associated 
with an input field: 


<counter> component (counter.js file) 


const Counter = { 
data() { 
return { 
count : 0, 


old value : 0 


} 
E 
template 
<input type="text" v-model="count" 
@keydown="verif ($event)" 
@input="calcul()" 
@focus="focus()" 
@blur="blur()" /> 


methods : { 


verif(event) { 
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if (event.key != "Backspace" && event.key != "Delete" && 
event.key != "Arrowheft" && event .key l= 
"ArrowRight" && 
event.key != "Tab") { 


/ / codone thas key mi it Ig nOr Marie 


TLIE wou 
event .preventDefault () ; 


(event .key < 


} 


this.old value = 


}, 


event .target.value; 


calcul() { 
this.Semit("sub", this.old value || 0); 
this.$emit("add", this.count || 0); 
}, 
focus ()) 4 
ali  ((telatalis} Olc velue == 40u) Emile- Coume = 
}, 
blur() { 
if (!parseInt(this.count)) { 


ells) -@LCl Welle = 
Talg Coume = 07 


} 
Ve 
emits : 


[" sub " 7 " add"] 


// the parent 


export default Counter; 


|| event.key > "9") 
// key forbidden 


// subtract 
// old value 
// add new value 


Wi. 
li 


// declare events emitted to 
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The <counter> component has been enriched with new methods, linked to new events 
to be taken into account during input. Also, a new reactive variable, old_value, has 
been created: 


e The old_ value variable contains the value that was entered in the field before 
pressing the key on the keyboard. 


e The count variable contains the value that was entered in the field after pressing 
the key on the keyboard. 


Why make this distinction? Because to calculate the total of all the counters, it will be 
necessary, with each typed key, to remove the previous value from the field (before 
pressing the key) and add the new value (after pressing the key). 


Each keypress is handled by the input event, which here calls the calcul () method. 
As the calculation associated with the total of the three counters is performed at the 
higher level (in the <counters> component, which is the parent component), you 
must indicate to this parent component the sum to subtract (old_value) and the 
sum to add (count). This is done by sending "sub" and "add" events, using the 
Semit (eventName, value) method. 


About the $emit(eventName, value) Method 


The Semit (eventName, value) method, executed from a component, 
sends the event Name event to the parent component, which can process it 
using the @eventName directive. The value parameter corresponds to the 
value to be transmitted if necessary. 


In addition, we indicate in the emits section of the component the list of events that this 
component can emit to its parent. 


This way of communicating between a child component (here, the <counter> 
component) and its parent (here, the <counters> component), using events, is the one 
recommended by Vue.js. 


Now let’s see the description of the <counters> component, which encompasses the 
three counters and the calculation of the total counters as you type in each one: 


<counters> component (counters.js file) 


import Counter from "./counter.js"; 
const Counters = { 
data() { 
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return { 
coral = @ 
} 
Y 
components : { 
Counter: Counter 
We 
template 


Counter 1 : <counter @add="add($event)" 
@sub="sub(Sevent)" /> <br> 

Counter 2 : <counter @add="add(S$event)" 
@sub="sub(Sevent)" /> <br> 

Counter 3 : <counter @add="add(S$event)" 
@sub="sub(Sevent)" /> <br><br> 

Total : {{total}} <br> 


< 
1 


methods : { 
add(value) { 
this.total += parseInt (value); 
My 
sub(value) { 
this.total -= parseInt (value); 


export default Counters; 


The "add" and "sub" events emitted in the <counter> child component are processed 
in the attributes of the <counter> component when used. The add (value) and 

sub (value) processing methods are registered in the parent component, which allows 
the value of the total to be changed each time a numeric key is pressed on the keyboard. 
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As you type in the fields, Total updates: 


(File Edit View History Bookmarks Tools Help = o x 
localhost/javascript/ x + 


< C Ọ D = localhost/avascript/ Ù » 


Counter 1 :|10 
Counter 2 : |123 


Couner3 E 


Total : 365 


Figure 4.4 - Calculation of the sum of the three counters 


We have seen how to communicate from a component to its parent using events. Now let’s 
look at how to communicate in the other direction, from a component to its child. For 
this, we use attributes called props here. 


Using props to communicate with children 


We have seen that the communication of information from a child component to its 
parent is done with events. Communication in the reverse direction, from parent to child, 
is done through attributes called props. We have already seen the use of these attributes 
in the previous chapter, in the Using attributes in components section. 


In this example, we will improve the <counters> component so that we tell it 

the number of counters we want to display. For this, we use the nb attribute in the 
component. For example, we will write <counters nb="5" /> to display 5 counters 
on the page. Each counter is displayed as in the previous form, namely Counter followed 
by its index starting from 1 (see Figure 4.5). 


First, we will modify the index.html] file to write the <counters> component using 
the nb attribute. Lets modify the index .htm1 file previously used: 


Using <counters nb=”5” /> (index.html file) 


<html> 
<head> 
<meta charset="ut£-8" /> 


<script src="https://unpkg.com/vue@next"></script> 
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</head> 
<body> 
<div id="app"></div> 
</body> 
<script type="module"> 


IMpone Counters ECOM !/counctersmaisis 


var app = Vue.createApp ({ 


components : { 
Counters:Counters 
template 


<counters nb="5" /> 
DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


Now, we will modify the counters .js file to integrate the new "nb" props into 
the component: 


Integration of the nb props in the <counters> component (counters.js file) 


Importi Counter iti V , Counter Su 


const Counters = { 
data () { 
return { 
coral s 0 
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Jo 
components : { 
Counter:Counter 
Jo 
props : ["nb"], 
computed : { 
NB() { 
var tab = []; 
for(var i = 0; i < this.nb; i++) tab.push(i+1); 
return tab; 
} 
}, 
template 
<div v-for="i in NB"> 
Counter {{i}} : <counter @add="add($event) " 
@sub="sub(Sevent)" /> 
</div> 
<br> 
Total : {{total}} <br> 


, 


methods : { 
add (value) { 
this.total += parseInt (value); 
Jo 
sub (value) { 
this.total -= parseInt (value); 
} 
E 
} 


export default Counters, 


The "nb" props are listed in the component’s props section. To display a list of counters, 
use the v- for directive on a <div> element. 
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How to Use the v-for Directive 


For the value of the v- for directive, you must specify an array to browse. To 
do this, we transform the value of the "nb" propsinto anarray [1, 2, 3, 
.., nb]. This is done using a computed property named NB, which returns 
the desired array. 


The number of counters indicated when using the <counters nb="5"> component is 
now displayed. 


I File Edit View History Bookmarks Tools Help = o x 
localhost/javascript/ x + 


< C Ọ D = localhost/avascript ar? >» 


Counter 1 :|1 
Counter 2 : |2 
Counter 3 : |3 
Counter 4 : |4 
Counter 5 :|5 


Total : 15 


Figure 4.5 - Displaying five counters 


We end the study of the Vue.js components here, which come together to form 
a full application. 


Now, let’s examine an aspect of Vue.js that helps you produce visual effects, allowing, for 
example, making HTML elements displayed on the HTML page appear or disappear using 
a visual effect. 


Using visual effects 


Visual effects make it possible to make HTML pages more dynamic by bringing 

visual animations to them. For example, to delete an item in a list, you can make it 
gradually disappear using an opacity effect rather than deleting it directly without using 
a visual effect. 
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It is possible to use visual effects with Vue.js, in particular, to make elements appear 

or disappear from the page. Visual effects that do not make HTML elements appear 

or disappear from the page (for example, making an element move by clicking on it) are 
also possible with Vue.js. You can refer to https: //vuejs.org/guide/extras/ 
animation.html for more details on these types of animations. We do not explain 
these effects here because the available documentation is clear enough to use them. 


Going forward in this chapter, we will learn about the visual effects that are related to the 
appearance or disappearance of one or more elements on the page. 


The element we want to help appear or disappear (using the visual effect) must be inserted 
in a component named <transitions. This component is used by Vue.js to produce 
the effect. 


Moreover, Vue.js uses the definition of CSS classes in which the CSS properties of the 
effect are described. Simply define the contents of the CSS classes (described in the 
following section), and Vue.js uses them at the appropriate times to achieve the effect. 


The CSS classes used by Vue.js on an element depend on the state of the element: should it 
appear or disappear? Depending on its state (visible or not), the CSS classes differ. 


When the element appears 


When the HTML element should appear, the names of the CSS classes used by 

Vue.js begin with the character string "v-enter". The class name then contains the 
suffix "-£rom" or "-to", which will be used to describe the CSS properties of the 
element at the start of the effect (with "- from") or at the end of the effect (with "-to"). 


CSS classes used by Vue.js 


So, we will have the following two CSS classes: 


e v-enter-from: This CSS class describes the CSS properties at the start of the 
element's appear effect. 


e v-enter-to: This CSS class describes the CSS properties at the end of the 
element's appear effect. 


Note 


Note that at the start of the appear effect, the element is not visible, but the 
CSS properties described in the v- enter -from class are applied to it 
immediately. If, for example, we enter the CSS opacity property equal to 
1 in the CSS properties of the v- enter - from class, the element becomes 
immediately visible as soon as the appearance effect starts. 
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Since the v- enter-to class describes the CSS properties of the element at the end of the 
effect, when the effect completes, Vue.js removes that CSS class from the element. 


We thus see that the CSS classes v-enter-fromand v-enter-to are used to describe 
the CSS properties of an element during the effect but are no longer used afterward on the 
element (i.e., outside the duration of the effect). 


The appearance effect progresses the CSS properties described in v-enter-from to 
those described in v- enter-to. For this, Vue.js uses the v-enter-active class, 
which describes how each of the CSS properties evolves. 


Example content of CSS classes 


Let’s look at some sample content from each of the three CSS classes mentioned above, 
v-enter-from, v-enter-to, and v-enter-active: 


v-enter-from class example 


.v-enter-from { 
opacity: 0; 
background-color: #FFCCCC; 


} 


Here, we indicate that the element will be invisible at the start of the effect (opacity: 0) 
and will have a background color (background-color: #FFCCCC): 


v-enter-to class example 


.v-enter-to { 
opacity: Om or 
background-color:black; 


} 


Here, we indicate that the element will be half visible at the end of the effect 
(opacity: 0.5) and will have a black background (background-color: black): 


v-enter-active class example 


.v-enter-active { 


transition: opacity 2s, background-color 2s; 
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Here, we indicate that the CSS opacity and background-color properties must 
evolve, each for two seconds. As all the specified CSS properties evolve for the same 
amount of time, we can simplify the code by writing it in shortened form. Here's how: 


v-enter-active class example (simplified form) 


.v-enter-active { 


transition: all 2s; 


} 
The all keyword overrides all specified CSS properties. 


Using CSS classes 


Now let’s show how to use these CSS classes in a program using a button that displays 
a paragraph with effect. The role of the button will be to hide or display, alternatively, 
a paragraph on which the effect will occur when the paragraph appears. 


This shows how the v-enter- from, v-enter-to, and v-enter-active CSS classes 
are used by Vue.js to produce an effect when an element appears on the page: 


Use a button to produce the appearance effect (index.html file) 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 


<style type="text/css"> 
-v-enter-from { 
opacity: 0; 
background-color: #FFCCCC; 
} 
.v-enter-to { 
opacity: 0.5; 
background-color:black; 
} 
-v-enter-active { 


transition: opacity 2s, background-color 2s; 
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</style> 
</head> 


<body> 
<div id="app"></div> 
</body> 


aS Capi 


var app = Vue.createApp ({ 
data() { 
return { 
show: false // initially hidden 
} 
Ihe 
template F 
<button @click="show=!show">Produce the 
effect</button> 
<transition> 
<p v-if="show"> 
Paragraph 1 
</p> 
</transition> 


DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


148 Advanced Concepts of Vue.js 


We have described the contents of the v-enter- from, v-enter-to, and v-enter- 
active CSS classes, which will be used by Vue.js to produce the effect. Then we inserted 
the Produce an effect button in the page so that when the button is clicked, the paragraph 
on which the effect is set to occur will alternately be hidden or displayed. To do this, the 
paragraph was inserted in an HTML <transition> element, thus allowing Vue.js to 
know the element on which to apply the effect. 


The paragraph is hidden at startup (because the reactive variable show is set to false). 
Clicking the Produce the effect button changes the value of the show variable to true, 
which starts the effect. 


Note 


The effect is started on the paragraph thanks to the <transition> 
component, which includes the paragraph to be displayed. It is thanks to this 
<transition> component that Vue.js knows the element on which to 
produce the effect. 


Notice that the effect lasts two seconds as indicated in the CSS transition property, 
and when the effect is finished, the CSS classes are removed from the <p> element, 
which then becomes a normal paragraph (without background color and with an opacity 
of 1). So, you see that the paragraph has an opacity of 0.5 at the end of the effect (the 

one indicated in v-enter-to), then suddenly changes to an opacity of 1 when the 
v-enter-to class is removed by Vue.js at the end of the effect. 


Note 


It is therefore preferable to indicate in the v-enter-to class the CSS values 
of the element when it no longer produces an effect, in order to make the effect 
more harmonious. 
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Let’s run the previous program. When the program is launched, the paragraph is hidden: 


[File Edit View History Bookmarks Tools Help = oO x 
localhost/javascript/ x + 

S CG QO D = bocalhost/avascript/ Y X = 
| Produce the effect | 


Figure 4.6 - The paragraph is hidden when the program is launched 


After clicking the Produce the effect button, the paragraph begins to appear, according 
to the CSS properties indicated in the v-enter-from, v-enter-to, and v-enter- 
active classes. 


[File Edit View History Bookmarks Tools Help a oO x 
localhost/javascript/ x Pek 

< © QO D = localhost/avascript/ Y © = 
| Produce the effect | 


Figure 4.7 — After clicking on the Produce the effect button, the paragraph appears progressively 
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Just before the effect ends, the paragraph has the CSS properties set in the v-enter-to 
class, so its background color is black, but with an opacity of 0.5, the background color 
remains gray, and the paragraph text is not visible. 


(File Edit View History Bookmarks Tools Help =z o 
localhost/javascript/index.html x + 


Se CG Ọ D = localhost/avascript/in Y Oo = 


Produce the effect 


Figure 4.8 - Paragraph just before the end of the effect 


At the end of the effect, the CSS classes are removed so that the paragraph appears in 
a normal way, in black and without a background color. 


(File Edit View History Bookmarks Tools Help 


= Oo x 
localhost/javascript/ x + 
= CG QO D = localhost/favascript/ YY » = 
(Produce the fe 
Paragraph 1 


Figure 4.9 - Paragraph at the end of the appear effect 


Once the paragraph has appeared, clicking on the Produce the effect button makes it 
disappear immediately (without producing any effect). This is due to the reactive variable 
show being set to false when the button is clicked. 


We have seen the different classes and stages when an element appears on the page. Now 
let’s see what happens when an element disappears from the page. We will see that there 
are many similarities between the appearance and disappearance of the element. 


Using visual effects 151 


When the element disappears 


When the element should disappear, Vue.js uses CSS classes similar to the previous ones, 
replacing the string "enter" with the string "leave". 


CSS classes used by Vue.js 
So, we will have the following two CSS classes: 
e v-leave-from: This CSS class describes the CSS properties at the start of the 
element's disappearing effect. 
e v-leave-to: This CSS class describes the CSS properties at the end of the 


element’s disappearing effect. 


The disappearing effect is going to be to progress the CSS properties described in 
v-leave-fromto those described in v- leave-to. After the effect is complete, the 
v-leave-to class is removed from the element's CSS classes. 


To progress CSS properties between the values shown in these two classes, Vue.js uses the 
v-leave-active CSS class, which describes the progression of CSS properties. 


Example content of CSS classes 


Let’s look at some example content from each of the three CSS classes mentioned above: 
v-leave-from, v- leave-to, and v-leave-active: 


v-leave-from class example 


.v-leave-from { 
Opacity: is; 
background-color: #FFCCCC; 


} 


Here, we indicate that the element will be fully visible at the start of the effect 
(opacity: 1) and will have a background color (background-color: #FFCCCC): 


v-leave-to class example 


.v-leave-to { 
opacity: 0; 
background-color:black; 
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Here, we indicate that the element will be invisible at the end of the effect (opacity: 0) 
and will have a black background color (background-color: black): 


v-leave-active class example 


.v-leave-active { 


transition: opacity 2s, background-color 2s; 


} 


Here, we indicate that the CSS opacity and background-color properties must 
evolve, each for two seconds. As all the specified CSS properties evolve for the same 
amount of time, you can simplify the code by writing it in shortened form: 


v-leave-active class example 


.v-leave-active { 


transition: all 2s; 


} 
The all keyword overrides all specified CSS properties. 


Using CSS classes 


Now let’s show how to use these CSS classes in a program, using a button that hides 
a paragraph with an effect. It’s almost the same program as before, but here we produce 
an effect when the paragraph disappears: 


Using a button to produce the disappearing effect (index.html file) 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 


<style type="text/css"> 
-v-leave-from { 
opacity: 1; 
background-color: #FFCCCC; 


} 


.v-leave-to { 
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opacity: 0; 
background-color:black; 

} 

.v-leave-active { 
transition: all 2s; 

} 

</style> 
</head> 


<body> 
<div id="app"></div> 
</body> 


SS Cigapies 


var app = Vue.createApp ({ 
data() { 
return { 
show: true // visible at start 
} 
jo 
template 
<button @click="show=!show">Produce the effect</button> 
<transition> 
SPRV IE USHOwWIS 
Paragraph 1 
</p> 
</transition> 


DF 
var vm = app.mount ("div#app") ; 
</script> 


</html> 
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The v- leave- from class is applied at the beginning of the effect. It indicates that the 
element is visible (opacity at 1) and has a background color #FFCCCC (salmon). 


The v-leave-to class indicates the values of CSS properties when the effect ends. The 
paragraph becomes invisible (opacity at 0) and has a black background color. But as 
the element becomes more and more invisible (opacity tends toward 0), the black 
background color also becomes less and less visible. 


If we write the enter and leave classes in the CSS part in the same program, with 
each click on the button, we obtain an effect of appearing or disappearing for the 
paragraph concerned. 


The CSS classes used here have fixed names, regardless of the effect used. This does not 
allow using multiple effects, as the visual effects would all use the same CSS class names. 


For this, Vue.js allows you to give a name to each effect, and thus be able to use different 
CSS class names. 


Using a name for the effect 


Classes of type "v-enter-xxx" or "v- leave-xxx" can be renamed to symbolize the 
effect with which they are associated. We just need to replace the character string "v-" 
with the name of the effect followed by "-". 


For example, "v-enter-from" will be replaced by "fade-enter-from" to 
give the name "fade" to the effect. We then add the name=" fade" attribute to the 
<transition> component, indicating <transition name="fade">. 


This allows us to integrate several effects into our application, by defining the CSS classes 
corresponding to each effect. 


The previous program, integrating the effect named "fade" in the paragraph, is then 
written as follows: 


Fade effect (index.html file) 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 


<style type="text/css"> 
.fade-leave-from { 
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opacity: 1; 
background-color: #FFCCCC; 
} 
.fade-leave-to { 
opacity: 0; 
background-color:black; 
} 
.fade-leave-active { 


transition: all 2s; 


.fade-enter-from { 
opacity: 0; 
background-color: #FFCCCC; 

} 

.fade-enter-to { 
opacity: 1; 
background-color:black; 

} 

.fade-enter-active { 
transition: opacity 2s, background-color 2s; 

} 

</style> 
</head> 


<body> 
<div id="app"></div> 
</body> 


<script> 


var app = Vue.createApp ({ 
data() { 
return { 


show: true 
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o 
template 
<button @click="show=!show">Produce the 
effect</button> 
<transition name="fade"> 
jo) W/oalae= slays: 
Paragraph 1 
</p> 
</transition> 


DE 
var vm = app.mount ("div#app"); 
</script> 


</html> 


The <transition> component can only have one element, which will be the 
one on which the effect will occur. To include multiple elements, you must use the 
<transition-group> component, which we explain below. 


Producing an effect on several elements 


The <transition> component can contain only one element. When the effect must be 
applied to several elements, it is necessary to create several <transition> components 
or group the elements in a <transition-group> component. In this example, 

let's look at using the <transition-group> component: 


Using the <transition-group> component 


<transition-group name="fade"> 
<p v-if="show"> 
Paragraph 1 
</p> 
go) Woaliea isla 


Paragraph 2 
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</p> 
</transition-group> 


The elements on which the effect occurs (here, the two paragraphs) are grouped in 
a<transition-group> element instead of the <transition> element that was 
used previously when there was a single paragraph on which the effect was produced. 


Now, we will take a look at how to write the CSS classes associated with some 
classic effects. 


Examples of commonly used effects 


Below are some descriptions of effects. With a few lines of CSS code, you can easily 
produce classic effects such as the shrinking/enlargement of a paragraph (shrink effect), 
its gradual disappearance/appearance (opacity effect), and its vertical displacement 
(ymove effect). You are free to choose the names given to these effects and symbolize 
the effect produced. 


The shrink effect 


To use the shrink effect (here called "shrink"), we use the CSS font-size property. 


At the beginning of the effect, the paragraph is of normal size: 


(File Edit View History Bookmarks Tools Help a oO x 


localhost/javascript/ x + 


i CGC Ọ D = localhost/avascript vw > 


Produce the effect 


Paragraph 1 


Figure 4.10 - The paragraph is normal size at the beginning of the disappearing effect 
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Once the effect has started following a click on the button, the paragraph decreases in size 
until it disappears. 


[File Edit View History Bookmarks Tools Help ae o x 
localhost/javascript/ x + 
€ C Ọ D = localhost/avascript/ Ù% X = 
l Produce the effect ) 
raapi | 


Figure 4.11 - The paragraph decreases in size until it disappears 


Once the paragraph has disappeared, it can reappear after another click on the button. 
The paragraph size will increase until it reaches its normal size: 


CSS classes to handle shrink effect 


.shrink-leave-from { 

} 

.shrink-leave-to { 
font-size: Opx; 

} 

.shrink-leave-active { 
transition: all 2s; 


.shrink-enter-from { 
font-size: 0px; 

.shrink-enter-to { 

.shrink-enter-active { 


transition: all 2s; 
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The CSS class shrink-leave-to indicates, for the disappearance effect, to go to a font 
size of Opx, that is, a reduction to 0 of the font size for the paragraph, which makes the 
paragraph invisible. 


The shrink-enter- from CSS class tells the effect to start with a font size of Opx, 
gradually growing to the normal paragraph size when visible. 


If CSS properties are not indicated in a starting class (for example, the shrink-leave- 
from class does not contain the font -size property), this means that the current value 
of this CSS property is used in the element. 


Similarly, if CSS properties are not indicated in an arrival class (for example, the shrink- 
enter-to class does not contain the font-size property), this means that we are 
progressing toward the value of this CSS property of the element when it will be visible at 
the end of the effect. 


The opacity effect 


The effect named "fade" uses the CSS opacity property. This effect consists of varying 
the CSS opacity property from 0 to 1 (to gradually make an element appear) or from 
1 to 0 (to make it disappear). 


Here is, for example, the effect of disappearance. The paragraph is disappearing with 
an opacity that tends toward 0. When the opacity is at 0, the element will be completely 
invisible on the screen. 


(File Edit View History Bookmarks Tools Help = o x 
localhost/javascript/ x + 


< Œ OD = localhostjavascript/ Ù » 


| Produce the effect | 


Figure 4.12 - The paragraph has an opacity that decreases toward 0 


160 Advanced Concepts of Vue.js 


Once the paragraph is invisible, just click again on the Produce the effect button to make 
it reappear gradually: 


CSS classes to manage opacity 


.fade-leave-from { 


} 


.fade-leave-to { 


opacity 3 Op 
} 
.fade-leave-active { 


Eransteron: guliL ©. Sie 


.fade-enter-from { 
opacity Op 

} 

.fade-enter-to { 

} 

.fade-enter-active { 


transition: all 1s; 


} 


The fade- leave-to CSS class indicates to go to an opacity of 0. The current opacity 
(of value 1) is the starting one. Since the initial value of the opacity is not defined in 
fade-leave-fronm, it will use the value defined by the CSS of the element (i.e., 1). 


Similarly, the fade-enter- from class indicates the current opacity at the start of the 
element’s appearance effect. The destination value of the opacity does not need to be 
specified as it will use the default value from the element CSS, that is, 1. 


The move-down effect 


To manage this effect (here, called "ymove"), we use the CSS properties transform 
(set to translateY (100px) ) and opacity (set to 0). This gradually moves the 
element 100px horizontally downward, gradually decreasing its opacity to 0. The element 
disappears as it moves down the page. 
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For example, here is what is displayed when the element has started to slide down by 
decreasing its opacity, which makes it less visible: 


(File Edit View History Bookmarks Tools Help ma oO x 


localhost/javascript/ x + 


5 CG QO D = localhost/javascript x% > = 


Produce the effect | 


Figure 4.13 - The paragraph moves down the page by decreasing its opacity 


As the effect continues, the paragraph moves down the page, until it reaches the distance 
of 100 pixels specified in the effect. The closer you get to this distance, the more the 
paragraph decreases in opacity, until it becomes invisible (opacity of 0). 


Í File Edit View History Bookmarks Tools Help 


i O x 
localhost/javascript/ x =- 
= CG QO D = localhost/avascript/ Y © = 
CEATA 


Figure 4.14 - The paragraph becomes almost invisible toward the end of the effect 
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Once the paragraph has disappeared, clicking on the Produce the effect button makes it 
reappear gradually from the bottom of the screen: 


CSS classes to handle moving down 


.ymove-leave-from { 
.ymove-leave-to { 
transform: translateY (100px); 
opacity Or 
.ymove-leave-active { 


transition: all 0.5s; 


.ymove-enter-from { 
transform: translateY (100px); 
opacity § Op 


-ymove-enter-to { 


} 


-ymove-enter-active { 


transition: all 0.5s; 


} 


The ymove- leave-to CSS class indicates the values of the CSS properties toward which 
we want to vary the indicated CSS properties. The transform property can contain 

the translateY (100px) value, indicating to perform a vertical translation (Y) of 100 
pixels. Adding an opacity of 0 makes the element disappear by moving it vertically. 


The ymove-enter- from CSS class allows you to indicate the values of CSS properties 
at the beginning of the appearance effect. The element is located at 100 pixels vertical 
distance, with an opacity of 0. The CSS properties will evolve to those specified in the 
ymove-enter-to class, and if nothing is specified in this class, the CSS properties 
usually used for an element (opacity of 1 and vertical distance of 0, i.e., the normal 
location) are those toward which we will evolve during the appearance effect. 
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The CSS transform property is very useful for producing visual effects, for example, 
rotation, enlargement, and displacement. 


This brings us to the end of the chapter. 


Summary 


After learning how to handle events and act when an external event (e.g., a click) occurs, 
we saw in this chapter how components created with Vue.js can be assembled to form 
complete applications. We learned the following: 


e To communicate from a component to its parent, we use events. 


¢ To communicate from a component to its child, we use the attributes in the 
component’s props section. 


Finally, to produce visual effects, all you have to do is write the CSS classes managed 
by Vue.js. 


In the next chapter, we will see an example of an application that allows us to put into 
practice the elements studied in the previous chapters. 


5 


Managing a List 
with Vue.js 


After going through the basic and advanced concepts of Vue.js, with this chapter, 
let’s finish our study of the Vue.js library by building an application to manage a list 
of elements. 


Why make this type of application? Quite simply because it allows you to perform fairly 
standard operations on the HTML elements of a page, such as inserting an element, 
modifying it, and deleting it. 


These are the basic operations that you need to know how to perform, for example, to 
manage the elements in a database. In this chapter, we will learn how to perform these 
operations on the elements displayed on the screen, and in the next part (where we study 
Node.js and MongoDB), we will see how to simultaneously update a database. 


Here are the topics covered in this chapter: 


e Splitting the application into components 
e Adding an element to the list 
e Removing an element from the list 


e Modifying an element in the list 
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But let’s start by discovering the screens of the application that we want to create 
with Vue.js. 


Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript-from-Frontend-to-Backend/blob/main/ 
Chapter%205.zip. 


Displaying application screens 
As mentioned earlier, we'll be building an application to manage a list of elements. 


Before writing the source code of our application, let’s show the different screens of the 
application by explaining their sequence. 


Initially, the list is empty. The Add Element button allows, on each click, to insert a new 
element in the list. 


(File Edit View History Bookmarks Tools Help = o x 


localhost/javascript/ x + 


= C Ọ D = localhost/avascript/ Y » 


Add Element 


Figure 5.1 - Screen when launching the application 
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Let’s click the Add Element button several times (here, three times): 


(File Edit View History Bookmarks Tools Help 


E x 
localhost/javascript/ x + 
S C OD = localhost/avascript/ Ù X = 
| Add Element | 


è Element 1 | Remove | | Modify | 


è Element 2 | Remove | | Modify | 


è Element 3 | Remove | | Modify | 


Figure 5.2 - After three clicks on the Add Element button 


Each element inserted has the index (starting from 1) of the element in the list. A Remove 
button and a Modify button are inserted after the item in the list. 


Let’s click on the Modify button on the second line. The item text is replaced by an input 
field, in which the cursor flashes to allow editing. 


(File Edit View History Bookmarks Tools Help 


localhost/javascript/ x -4 


= C QO D = localhost/avascript/ Y » 


| Add Element | 


è Element 1 | Remove | | Modify | 


-Ena } [Remove (ody 


e Element 3 | Remove | | Modify | 


Figure 5.3 - The second item in the list can be changed 
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Let’s modify the text in the input field, by typing New Element 2. 


(File Edit View History Bookmarks Tools Help 


z Oo x 
localhost/javascript/ x + 
= C OD = localhost/avascript/ YY © = 
(Add Element ) 


è Element 1 | Remove | | Modify | 
Cin E aD 
è Element 3 | Remove | | Modify | 


Figure 5.4 - Editing a list item 


For the modification of the element to be reflected, you must leave the input field, by 
clicking elsewhere on the page. 


(File Edit View History Bookmarks Tools Help 


= Oo x 
localhost/javascript/ x -= 
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(Add Element | 


è Element 1 | Remove | | Modify | 


e New Element 2 | Remove | | Modify | 


è Element 3 | Remove | | Modify | 


Figure 5.5 - Taking into account the modification of the element 


Finally, to remove the first and third elements, click on their corresponding 
Remove buttons. 
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[File Edit View History Bookmarks Tools Help = o x 
localhost/javascript/ x + 


= CG O D = bocalhost/avascript/ Ù » 


Add Element 


e New Element 2 | Remove | | Modify 


Figure 5.6 - After deleting the first and last element 


We have administered here a list of elements on which we have performed basic 
operations, namely, inserting a new element, modifying the element, and deleting it. 


Using HTTP Protocol 


This application uses a PHP server to work because the import of JavaScript 
modules with the JavaScript import statement only works under the HTTP 
protocol. We will see in the next part (Chapter 9, Integrating Vue.js with 
Node.js) how to use a Node.js server to also make it work, by coupling it in 
addition with a MongoDB database. 


We have described the operation of the application, and the sequence of the various 
windows. Now let’s see how to build this application with Vue.js. We first explain how the 
application can be broken down into different components. 


Splitting the application into components 


When you create an application with Vue.js, you have to start by asking yourself what 
components you will need to build it. 


In our case, it would be the following: 


e A<GlobalApp> component that groups the whole application. It is this 
<GlobalApp> component that will be integrated into our index.html page. 
It will display the Add Element button as well as the list of elements below. 


e An <Element> component that displays a list element line, which will include the 
element's text, the Remove button, and the Modify button. 
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The list of elements will be associated with a reactive variable named elements, which 
will be an array containing, for each element, the displayed text. This reactive variable will 
be registered in the <GlobalApp> component. It will be modified when adding a new 
element to the list or when deleting or modifying an element in the list. 


So, the core files of our app are as follows: 


e The index.html file, which is the main file 


e The global-app. js file, which contains the <GlobalApp> component, and is 
imported into the index.html file 


e The element .js file, which describes an element of the displayed list (the 
<Element> component), namely the text of the element, as well as the Remove 
and Modify buttons 


Here is the content of these files: 


index.html file 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
</head> 


<body> 
<div id="app"></div> 
</body> 


<script type="module"> 
import GlobalApp from "./global-app.js"; 
var app = Vue.createApp ({ 


components : { 
GlobalApp:GlobalApp 


o 
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template : "<GlobalApp />" 


DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


The index.html] file displays the <GlobalApp> component, which corresponds to the 
main component of the application, which we'll now describe: 


<GlobalApp> component (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 
elements : [] 
} 
Jo 
components : { 
Element : Element 
Ihe 
template 
<buttonsAdd Element</button> 


<ul></uls 


export default GlobalApp; 


We find the reactive variable elements, as well as the Add Element button and the 
<ul> list of elements, empty for the moment. 
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The <Element > component is described below. It is empty for the moment and will be 
enriched in the following sections: 


<Element> component (element.js file) 


const Element = { 
data() { 
return { 
} 
Jlo 


template 


` 


` 


i 


export default Element; 


Using HTTP Protocol 


As the JavaScript code comprises module import instructions, it is 
necessary to use a web server accessible by HTTP to display the HTML page 
corresponding to index . html1. The file protocol would not work here. 


Let’s display the result of this temporary code on the screen: 


(File Edit View History Bookmarks Tools Help 


- O xX 
localhost/javascript/ x + 

= C QO D = bocalhost/avascript/ Y X = 
Add Element 


Figure 5.7 - Result displayed with our startup code 


In Figure 5.7, we see the rendering of the <GlobalApp> component, which currently 
only displays the Add Element button. Let’s see how to process a click on this button in 
order to insert a new element in the list. 


Adding an element to the list 173 


Adding an element to the list 


We will start with the functionality to add an item to the list. The global-app. js file 
is modified to process a click on the Add Element button (this button is included in the 
global-app.js file). 


Let’s add the code that should be run when the Add Element button is clicked: 


Taking into account the click on the Add Element button (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 


elements : [] 


} 
Me 
components : { 
Element : Element 
Je 
template 
<button @click="add()">Add Element</button> 
<ul> 
<li v-for=" (element, index) in elements" 
:key="index">{{element}}</li> 
</ul> 


` 
, 


methods : { 
add() { 
var element = "Element " + (this.elements.length + 
1); // "Element X" 
this .elements .push (element); 


export default GlobalApp; 
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A click on the Add Element button is handled by the click event, which calls the 
add () method defined in the methods section. The add () method adds a new element 
to the reactive variable elements. 


The list of elements is updated in the component template. For the moment, we'll use 
the <li> tag to define the list element to insert, but below, we will use the <Element > 
component, which will integrate the Remove and Modify buttons. 


Now let’s verify that our modification of the <GlobalApp> component works. To do this, 
click several times on the Add Element button. List items are inserted with each click, as 
seen in the following figure. 


[File Edit View History Bookmarks Tools Help = o x 


localhost/javascript/ x + 


E C QO D = localhost/javascript vv » 


Add Element 


e Element 1 
e Element 2 
e Element 3 


Figure 5.8 - Add Element button clicks 


The element inserted here is an HTML <1i> element. But it is interesting to replace 
the element <1i> with a Vue.js component because it allows using the philosophy of 
Vue.js, which is the maximum use of components. Let’s name this new component 
<Element >, which will replace the <1i>element.. 


Using the <Element> component 


Next, let’s use the <Element > component, instead of the previous <1i> element. 


The <GlobalApp> component is modified to integrate the <Element > component: 


Using <Element> component in list (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
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return { 


elements : [] 


} 
}, 
components : { 
Element : Element 
ie 
template 
<button @click="add()">Add Element</button> 
<ul> 
<Element v-for="(element, index) in elements" 
:key="index" :text="element" /> 
</ul> 


fi 


methods : { 


add() { 
var element = "Element " + (this.elements.length + 
i) § 
this.elements.push(element) ; 

} 


export default GlobalApp; 


The <Element > component is modified to consider the text attribute passed and 
display the list element. The two buttons Remove and Modify are inserted after the text: 


The text to display in the list item is passed as an attribute (via props) to the <Element > 
component, which will display it in its template. We use the text attribute (or any other 
attribute name) for this. 


Using the text attribute and buttons (element.js file) 


const Element = { 
data() { 


return { 


} 
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Jo 
template 
<li> 
<span> {{text}} </span> 
<button> Remove </button> 
<button> Modify </button> 


</li> 


` 
i 


props : ["text"], 


export default Element’; 


Let’s check that the result is equivalent to the previous one (with the addition of the 
Remove and Modify buttons). 


(File Edit View History Bookmarks Tools Help = o x 


localhost/javascript/ x + 
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= CG QO D = localhost/avascript/ Y7 


Add Element 


. Element 1/ Remove | Modify | 
© Element 2) Remove | Modify | 


è Element 3| Remove | Modify | 


Figure 5.9 - Using the <Element> component in the list 
Clicking on the Remove and Modify buttons in the list does not work yet but will soon, 
in the following sections. 
The Remove and Modify buttons are placed side by side, with no spacing. Lets add some 
CSS code to better lay them out on the screen. 
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Changing the appearance of the list using CSS code 


Before handling button clicks in the list, lets use some CSS to display the list items in 
a nicer way. 


The CSS code is indicated directly in the index.html file: 


Using CSS code to display the list (index.html file) 


<html> 
<head> 
<meta charset="utf£-8" /> 
<script srce="https://unpkg.com/vue@next"></script> 


<style type="text/css"> 
li { 
margin-top:10px; 
} 
ul button { 
margin-left:10px; 
} 
</style> 
</head> 


<body> 
<div id="app"></div> 
</body> 


<script type="module"> 
import GlobalApp from "./global-app.js"; 


var app = Vue.createApp ({ 
components : { 
GlobalApp:GlobalApp 


}, 


template : "<GlobalApp />" 
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DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


We can see that the appearance of the list is now more pleasant. 


[File Edit View History Bookmarks Tools Help 


- oOo X 
localhost/javascript/ x + 
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Add Element 


e Element 1 | Remove | | Modify 


e Element 2 | Remove | | Modify 


e Element 3 | Remove | | Modify 


Figure 5.10 — List of elements improved with CSS code 


The displayed list now has a look that suits us! We must now manage clicks on the 
Remove and Modify buttons. Let’s start with the Remove button. 


Removing an element from the list 


Now let’s deal with a click on the Remove button for a list item. Removing an item from 
the list will be done by removing the element from the reactive variable elements. 


Note 


Indeed, the variable el ements being reactive, any modification of this 
variable will lead to the re-display of the list. 
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To do this, a click on the Remove button is managed by associating it with a process 
during the click. We therefore call the remove () method defined in the <Element > 
component on each click: 


Taking into account the click on the Remove button (element.js file) 


const Element = { 
data() { 


return { 


} 
i 
template 
<li> 
<span> {{text}} </span> 
<button @click="remove()"> Remove </button> 
<button> Modify </button> 
</li> 


= 
1 


props s ecse", 
methods : { 
remove () { 
// process the click on the Remove button 
}, 
}, 


export default Element; . 


The process involved in clicking on the Remove button is discussed later in the chapter. 


Note 

To process the click on the Remove button, we must update the reactive 
variable elements, but since this is located in the parent component 
<GlobalApp>, we must send an event to this parent component to ask it to 
remove the element in the variable elements. 
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To indicate the element to be deleted, it must be referenced by its index. For this, 

we need to indicate the index of the element when creating the <Element > component. 
We, therefore, create a new attribute (named "index") in this component. Thus the 
remove () method sends a "remove" event to the <GlobalApp> parent component, 
indicating in the parameters the index of the element to be removed from the list. 


The <Element > component becomes as follows: 


Handling the click on the Remove button (element.js file) 


const Element = { 
data() { 
return { 
} 
ie 
template 
<li> 
<span> {{text}} </span> 
<button @click="remove()"> Remove </button> 
<button> Modify </button> 
</li> 


props : ["text", "index"], 
methods : { 
remove() { 
// process the click on the Remove button 
this.$emit("remove", { index : this.index }); 
Jo 
Jo 


emits : ["remove"] 


export default Element; 
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The <GlobalApp> component is modified to process the reception of the "remove" 
event sent when clicking on the Remove button: 


Handling the reception of the “remove” event (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 
elements : [] 
} 
jo 
components : { 
Element :Element 
he 
template 
<button @click="add()">Add Element</button> 


<ul> 
<Element v-for="(element, index) in elements" 
:key="index" :text="element" 
:index="index" 
@remove="remove (S$event) " 
/> 
</ul> 


` 
1 


methods : { 


add() { 
var element = "Element " + (this.elements.length + 
1DE 


this .elements .push (element); 
be 
remove(params) { 
var index = params.index; 
this.elements.splice(index, 1); // delete element in 


// array 


182 Managing a List with Vue.js 


export default GlobalApp; 


We have indicated in the <Element > component the new attribute index, which will 
allow knowing the index of the element in the list. 


Let’s add three items to the list (see Figure 5.11), then click the Remove button for the item 
on the second line (see Figure 5.12): 


[File Edit View History Bookmarks Tools Help 
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e Element 1 | Remove | | Modify | 


è Element 2 | Remove | | Modify | 


e Element 3 | Remove | | Modify | 


Figure 5.11 - Adding three elements to the list 
Here’s what we will see after clicking the Remove button: 


[File Edit View History Bookmarks Tools Help 
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è Element 1 | Remove | | Modify | 


è Element 3 | Remove | | Modify | 


Figure 5.12 - Deleting item Element 2 from the list 
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By clicking on the Remove button, Element 2 has been removed from the list. 
Let’s now see how to manage the modification of an element, following a click on the 
Modify button. 


Modifying an element in the list 


Modifying a list element is done in several steps: 


1. Following a click on the Modify button, we transform the text of the list element 
(currently a <span> element) into an HTML <input > element initialized with the 
text of the element. 

2. Then we manage the exit of the input field, by retrieving the value entered in the 
field, then by replacing the input field with a <span> element with the new content. 

3. Finally, we improve the input by allowing the input control to automatically have 
the focus after clicking on the Modify button. 


Let’s see these different steps in depth. 


Transforming the <span> element into an <input> 
element 


The first step is to transform the <span> element into an <input > element, which will 
allow the text of the element to be modified. To do this, we will add a new reactive variable 
(named "input") in the <Element > component. It indicates whether to display a text 
as a <span> element (if input is false) or whether to display an <input > input field 
(if input is true). By default, the input variable is set to false (the text is displayed). 
It will change to true when clicking on the Modify button: 


Turning a <span> element into an <input> element (element.js file) 


const Element = { 
data() { 
return { 


input : false // display element text by default 
} 
Pa 
template : ` 
<li> 


<span v-if="!input"> {{text}} </span> 
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<input v-else type="text" :value="text" /> 
<button @click="remove()"> Remove </button> 


<button @click="input=true"> Modify </button> 
</li> 


` 
i 


props 3 (Meee, Walsavclepet”]| 
methods : { 
remove() { 
// process the click on the Remove button 
this.Semit ("remove", { index : this.index p); 
Jo 
Jo 


emits : ["remove"] 


export default Element; 


Note 


The v-if and v-else directives are used to display the text of the element 
as a <span> element or as an <input > element. 


After inserting three items into the list, let’s edit the second item: 


[File Edit View History Bookmarks Tools Help 
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© | Element 2 | | Remove | | Modify 


e Element 3 | Remove | | Modify 


Figure 5.13 - Editing the second item in the list 


We now need to show how to leave the input field and redisplay the text as a list element. 
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Exiting from the input field 


Once the edit control has been modified, you must retrieve the value entered to display 
it instead of the edit control. To do this, in the <Element > component, we use the blur 
event, which indicates that we have left the input field. 


During the processing of this event, the value of the input field is retrieved, which is 
transmitted to the parent <GlobalApp> component by means of an event named 
"modify", for example. The <GlobalApp> component modifies the element value in 
the elements variable when processing the received modi fy event. 


Note 

The modification of a reactive variable located in a parent component must 
be done by sending an event to the parent component, which will have to 
process it. 


Finally, the transformation of the input field into text is done by modifying the reactive 
variable input defined in the <Element > component by positioning it again to false. 


The <Element > component is modified as shown here: 


Taking into account the output of the input field (element.js file) 


const Element = { 
data() { 
return { 


input : false 


} 
E 
template 
<i 
<span v-if="!input"> {{text}} </span> 
<input v-else type="text" :value="text" 
@blur="modify ($event)" /> 
<button @click="remove()"> Remove </button> 
<button @click="input=true"> Modify </button> 
</li> 
props itext Endex 


methods : { 
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remove() { 
// process the click on the Remove button 


this.Semit("remove", { index : this.index }); 


}, 
modify(event) { 


var value = event.target.value; // value entered 


// in the field 


this.input = false; // delete input field 
: this.index, value : 


this.$emit("modify", { index : 


value }); // update element in list 


} 
}, 


emits : ["remove", "modify"] 


export default Element; 


The <GlobalApp> component is also modified to process the reception of the 
"modify" event and thus modify the list displayed: 


Processing the modify event (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 
elements : TI 


} 
Ib: 
components : { 
Element : Element 
Jo 


template 
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<button @click="add()">Add Element</button> 
<ul 
<Element v-for=" (element, index) in elements" 
:key="index" :text="element" 
: index=" index" 
@remove="remove ($event)" @modify="modify ($event)" 
/> 
</ul> 


= 
1 


methods : { 


add() { 
var element = "Element " + (this.elements.length + 
DE 


this.elements.push(element) ; 
Po 
remove (params) { 
var index = params.index; 
this.elements.splice (index, 1); 
I 
modify(params) { 
var index = params.index; 
var value = params.value; 


this.elements [index] = value; // new element value 


export default GlobalApp; 
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The following figure shows the result after editing the second list item. 


(File Edit View History Bookmarks Tools Help 
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Figure 5.14 - Editing a list item 


A final improvement that we can make to our program is to give focus to the input field 
directly after clicking on the Modify button. Let’s see how to proceed. 


Giving focus to the input field 


Giving focus to the input field requires using the focus () method, which is defined in 
the Document Object Model (DOM). The DOM is an internal API (in the JavaScript 


language) implemented in browsers. 


Vue.js makes it possible to make a relationship between the components defined in 
Vue.js and the HTML elements used by the DOM. For this, we use the ref attribute, 


O 


» 


which makes it possible to make a correspondence between the two systems. 


Note 


would be inaccessible. 


This ref attribute can be used for each HTML element defined in our 
component templates. But it should be used only for necessary cases, such as 
here, to use the focus () method defined in the DOM, which otherwise 


Once the ref attribute has been positioned (here, on the <input > element allowing 
input), all that remains is to use it to give focus to the input field. The question then is: in 
which method of our component should we call the focus () method? 
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We must use a method in which we are sure that the input field is created. The template 
written in the component must be transformed into HTML code and integrated into 
the memory of the browser (in the DOM), which can then display it. So, we see that 

a transformation process takes place, which takes some time to execute. 


Vue.js has defined a number of methods that are called automatically when using 
components. In the previous chapter, we saw a method called created (). There are 
other methods, in particular, the mounted () and updated () methods. 


Here are the specifics of these three methods: 


e The created () method is called when creating the component. This is the first 
method called. 


e The mounted () method is called when the component is transformed into HTML 
elements and integrated into the DOM. We can therefore have access, in this 
method, to HTML elements with the DOM API. 


e The updated() method is called when a modification is made in the component. 
For example, when a <span> element is replaced by an <input > element 
following a click on the Modify button. Or when, conversely, the <input > element 
turns back into a <span> element (when leaving the input field). 


We see that the updated () method is the method in which we can do the processing 
giving focus to the input field. But as this method is called both when transforming into 
an input field or simple text, it will be necessary to check that the <input > element 
associated with the reference indicated in the ref attribute exists. Otherwise, an error 
visible in the console will occur: 


Giving focus to the input field as soon as it appears (element.js file) 


const Element = { 
data() { 
return { 
input : false 
} 
}, 
template 
eils 
<span v-if="!input"> {{text}} </span> 
<input v-else type="text" :value="text" 


@blur="modify ($event)" ref="refInput" /> 
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<button @click="remove()"> Remove </buttons 


<button @click="input=true"> Modify </button> 
</li> 


progos s [Veee Wasavslepet]| 
methods : { 
remove () { 
// process the click on the Remove button 
this.$emit ("remove", { index s this.index }); 
Ja 
modify (event) { 
var value = event.target .value; 
this.input = false; 
this.Semit ("modify", { index : this.index, value 
value }); 


} 
Da 
emits : ["remove", "modify"], 
updated() { 
// check that the ref="refInput" attribute exists, and 
// if so, give focus to the input field 
if (this.$refs.refInput) this.$refs.refInput.focus(); 


export default Element; 


When using the ref attribute in a template, Vue.js stores it in the component’s internal 
$refs variable. We can therefore access the corresponding HTML element using 
this.$refs.refInput if we wrote ref="refInput" in the component template. 
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Let’s check (see the following figure) that the edit control gets the focus directly when 
clicking on the Modify button. 


[File Edit View History Bookmarks Tools Help = o x 


localhost/javascript/ x + 


< Œ Ọ D = localhost/avascript 21 >» 


Add Element 


e Element 1 | Remove | | Modify 


| Element 2| | Remove | | Modify 


e Element 3 | Remove | | Modify 


Figure 5.15 - The input field gets the focus directly 
This brings us to the end of the chapter. 


Summary 


This chapter and the example discussed in it shows that it is very easy to manage the 
elements of an HTML page interactively without leaving the page. 


Here, we first decomposed the application into different components, then we assembled 
them, making them communicate through events and props attributes. We have learned, 
thanks to this complete example, how to manage a list of elements to carry out the main 
operations, which are the insertion, the modification, and the deletion of an element. 


In the next few chapters, we will see how to use Node.js to connect our application to 
a MongoDB database and thus be able to store the elements of the list in a database. 
We will begin by learning how to work with node.js modules in the next chapter. 


Part 3: 
JavaScript on the 
Server-Side 


This part is about using JavaScript in a Node.js server. It explains the use of modules such 
as Express (to quickly create a Node. js-based web application using the MVC pattern) 
and the MongoDB database. 


We end our study by building an application on a single page (this principle is called 
Single Page Application) which is written with Vue.js on the client-side, and with Node. 
js, Express and MongoDB on the server-side. The purpose of this book is to enable you to 
know how to make this type of application. 


This section comprises the following chapters: 
e Chapter 6, Creating and Using Node.js Modules 
e Chapter 7, Using Express with Node.js 
e Chapter 8, Using MongoDB with Node.js 
e Chapter 9, Integrating Vue.js with Node.js 
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Creating and Using 
Node.js Modules 


Modules are at the heart of Node.js. They correspond to JavaScript files and can be used in 
our applications. A program for the Node.js server will consist of a set of modules, that is, 
JavaScript files. 


There are three kinds of modules: 


e Modules that we write ourselves for our applications. 
e Modules internal to Node.js and usable directly. 


e Modules that can be downloaded from the internet using a utility called npm (npm 
stands for Node.js package manager). This npm utility is installed with Node.js itself. 


In this chapter, we will learn how to create and use these different types of modules. 


Regardless of the type of modules used, the require (moduleName) instruction (see 
below) allows the module called modul eName to be included in the current file. The 
functionalities of the module will then be accessible. 


196 Creating and Using Node.js Modules 


Here are the topics covered in this chapter: 


e Using our own modules 
e Using internal Node.js modules 


e Using downloaded modules with npm 


Let’s first see how to create and use our own modules with Node.js. 


Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript-from-Frontend-to-Backend/blob/main/ 
Chapter%206. zip. 


Creating and using our own modules 


In this example, we use two modules, each corresponding to a JavaScript file: 


e The first module (here named test . js) will be the main file of our application, 
the one we execute using the node test.js command in a command window. 


e The second module (here named modulel . js) will be the one we want to use in 
our main test .js module. The module1 . js module will then be enriched to 
show how its functionalities are accessible outside the module (and will therefore 
be used in the main test .js module). 


Let’s go ahead and create these two modules. 


Creating a module 


Here is the content of the two files, module1.js and test.js: 


module js file 


console.log("modulel.js is loaded") ; 


Creating and using our own modules 197 


The module currently has a simple console.log () statement. The module will then 
be enriched. The main module test.js is the following: 


test.js file 


var modl = require("./modulel.js") ; 
// or require ("./module1") without specifying the .js extension 
console.log("mod1 =", mod1)j; 


Here, we use the require (moduleName) instruction, which allows us to load in 
memory the moduleName module. Any use of the functionalities of the moduleName 
module requires the require (moduleName) instruction beforehand. 


The require (moduleName) instruction returns a reference to the module loaded in 
memory. This reference is stored in a variable (here, mod1), which will then allow access 
to the functionalities described in the module (here, none for the moment). 


The test .js file is the main file that loads the other modules. It is therefore this test .js 
file that is executed using the node test.js instruction in a command window. 


cs.) Terminal 


Figure 6.1 - Using a module with require(module) 


We can see here that the execution of the main test . js module invokes the call of 

the require ("./modulel1. js") instruction, which executes the content of the 
module1.js file, hence the display text specified in the console.log () statement in 
the modulel. js module. 


After loading module1 . js, the mod1 variable is initialized and we will be able to access 
functionalities that the module exports later on. 


Before adding functionalities to the module1 . js module, let’s see how to manage the 
location of modules using the node_modules directory. The node_modules directory 
is used by Node.js to locate modules for which it does not have a path. Using this 
directory simplifies the writing of module names when loading them into memory 

with the require (moduleName) instruction. 
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Using the node_modules directory 


Note that the previous require (moduleName) statement requires indicating the 
access path to the module, for example, " . /" to indicate the current directory. 


However, if the module is in the node_modules directory, it is not necessary to indicate 
the path because we are sure that the module is inside the node_modules directory 
(and moreover, it should not be specified). The node_modules directory can be in 

the main application directory (called the local node_modules directory) or in 

a dedicated directory created by Node.js (called the global node_modules directory: in 
this case, it is automatically created during the installation of Node.js). 


Note 

If the module is not found in the node_modules directory (local or global) 
and if the access path to the module is not indicated, an error occurs when 
loading the module with the require (moduleName) instruction. 


Now, we will create a node_modules directory in the current directory where the main 
file, test . js, is located. Lets transfer the module1. js file to this directory and use the 
require ("module1.js") statement without specifying the path to the module. 

You can also write require ("module1") without indicating the extension of the 
JavaScript file: 


Include module1 located in node_modules directory (test.js file) 
var modl = require("modulel.js"); // or require ("modulel") 


console.log("mod1 =", modih 


The module1.js file must be in the locally created node_modules directory, while the 
test.js file remains in the current directory, as described here: 


root / 
|— node_modules/ 
| |— modulel.js 


|— test.js 
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fc] Terminal 


Figure 6.2 - The module is loaded from the node_modules directory 


We can see that the module is indeed found by Node.js, because Node.js looks for it in the 
node_modules directory, which was created in the current directory. 


Now let’s see how to allow a module's files to be grouped in a directory, using the 
package. json file associated with the module. 


Using the package.json file 


The node_modules directory (whether located in the application directory or the 
Node.js installation directory) can contain a lot of files and sometimes a module can 
consist of many files and directories. It would be easier to associate a module with 

a directory in the node_modules directory. 


Let's create the module directory inside the node_modules directory. The module1 


directory contains the module1 . js file but may also contain other files and directories 
related to this module. 


The file system is displayed here: 

root / 

|— node_modules/ 

| |— module1/ 

| |— modulel.js 


|- test.js 


Note 


The moduleName indicated in the require (moduleName) statement 
represents, in this case, the name of the directory that contains the module files. 
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But as it is necessary to know which file of the directory we must use first when loading 
the module (as there can be many files in this directory), we indicate this correspondence 
in the package. json file in the "main" key. 


The package. json file is a text file in JSON format, located in the directory of each 
Node.js module. 


Now, we will create the package. json file in the module1 module directory and 
indicate in this file the "main" key with the value "modulel.js". 


The file system is as follows: 

root / 

|— node_modules/ 

| |— module1/ 

| |— module1.js 

| |— package.json 


|— test.js 


package.json file in the node_modules/module1 directory (package.json file) 


{ 


"main" : "modulel.js" 


} 


We indicate in the "main" key that we must load the module1. js file during the 
require ("module1") instruction: 


Including module1 located in node_modules/module1 directory (test.js file) 


var modl = require("modulel"); //"modulel" is the directory name 
console.log("mod1 =", mod1); 


Note 


Please note that the module name in the require ("module1") 
statement in this case is the name of the directory that contains the module in 
the node_modules directory. So, we cannot write the instruction here in 
the form require ("modulel.js"), which would cause an error. 
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We now visualize the execution of the test .js file: 


cs.) Terminal 


Figure 6.3 - Module loaded with the package.json file 


The "main" key in the package. json file is optional if the main module file is named 
index. js. In all other cases, the "main" key must be indicated in package. json. 


We know how to run a module, but for now, the module contains a simple console. 
log () statement. Lets see how to add features to the module and then use them. 


Adding functionalities to the module 


The newly created module1 .js module is accessible but does not currently offer any 
functionality. Let’s see how to add some. 


Exporting multiple functions in the module 


For example, let’s create the function add(a, b), which returns the sum of a and b: 


add(a, b) function defined in module1.js (modulel1.js file) 


console.log("modulel is loaded"); 


function add(a, b) { 
return a+b; 
} 
module.exports = { 
add : add // make the add() function accessible 
// outside the module 


}; 
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To export a function outside of a module (and make it accessible to users of the module), 
you can just embed it in the module. exports object defined by Node.js in each 
module. Each key defined in the module. exports object will be a function accessible 
outside the module. 


We can thus define several functions in the module that will be accessible thanks to the 
module.exports object. 


The usage of the add (a, b) function in the test .js file is as follows: 


Using add() function in test.js file (test.js file) 


var modili = require("modulel") ; 

console.log("mod1 =", mod1) ; 

var total = modl.add(2, 3); // call of the add() function 
// defined in modulel 

consolerlogOUmodimadd (2r 3I Einu ota displays I5 


The following display is obtained: 


ic.| Terminal 


Figure 6.4 - The add() function added to the module 


Let’s add a second function in the module. For example, the function mult (a, b), 
which returns a*b. 


If we add the mult (a, b) function in the module, it is written as follows: 


Adding the mult(a, b) function to the module (module1.js file) 


console.log("modulel is loaded") ; 


function add(a, b) { 
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return a+b; 


function mult(a, b) { 


return a*b; 


} 

module.exports = { 
add : add, 
mult : mult 


} 


Now, we will use the two functions add() and mult () inthe test. js file. This verifies 
that a module can provide several functionalities to other modules that use it: 


Using the module’s add() and mult() functions (test.js file) 


var modl = require("modulel") ; 


console.log("mod1 =", mod1); 


var total = modl.add(2, 3 


Ng 
CGomsoilla . thee; (“merci .ackl(2, 3)) = Y, tota Hii @B & 23 = 3 
Wee coral = moch mule (YB, 3NF 
consoler los Umodimmulti(2 m Em ota //2* 3 =6 


The following display is obtained: 


ic.) Terminal 


Figure 6.5 - Using the two functions of the module 


Now let’s see how to improve the module concept by using a so-called main function in 
the module. 
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Allowing a function to be the main function of the module 


Often, the module wishes to make a function its main function (the other functions 
defined in the module are secondary functions). This allows access to this main function in 
a simplified form. 


Suppose (as before) that module1 makes available the add (a, b) function and the 
mult (a, b) function. We want the add () function to be the main function of the 
module, which means that we can use it outside the module as mod1 (2, 3) instead 
of modl.add(2, 3).Themult(a, b) function will remain accessible in the form 
modl.mult(2, 3). 


Note 


Note that only one function can be defined as the main function in a module. 


In this case, just specify it in the module.exports object like so: 


Making the add() function accessible as a main module function 
(modulel1.js file) 


console.log("modulel is loaded"); 


function add(a, b) { 


return a+b; 


function mult(a, b) { 


return a*b; 


// first define the main function 
module.exports = add; // the add() function defined outside 
// the module, is made main 


// then define the secondary functions 
module.exports.mult = mult; // and the mult() function 
// becomes usable as well 
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Note 

It is important to assign the values in this order in the module.exports 
object (define the main function first, then the secondary functions). If you 
make the assignment in the other direction (module . exports .mult 
first, then module . exports), the assignment of module . exports last 
will erase the value already positioned in module . exports .mult 


Also, we can no longer assign module . exports as an object, because that would 
remove the previously assigned value if we wrote module.exports = { mult 
mult }. 


We now use the module as follows: 


Using the module1.js module that has a main function (test.js file) 


var modl = require("modulel") ; 


console.log("mod1 =", mod1); 

var total = mod1(2, 3); / /minsteacdmor modimaddi(2) 3) 
consoles log ({medil@r 3) — total) 

var total = modl.mult(2, 3); 

Gompsolle, los (Yimochl wimihe(a, 3) = ™, oa 


The following display is obtained: 


ic.) Terminal 


Figure 6.6 — Using the module with the main function 
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Note 


Notice that instead of using the mod1 variable as an object, we now use it as 
a function. In the call to mod1 (a, b) causes the addition of a and b, so it 
is preferable that the variable be named "add" rather than "modi" in the 
instruction require (moduleName). 


We saw how to create and use our own module. Now let’s take a look at how to use 
internal Node.js modules. 


Using internal Node.js modules 


Node.js already has internal modules. They can also be used with the 
require (moduleName) instruction seen previously. 


Let’s look at an example of an internal module. There is, for example, the "fs" module 
in the Node.js system. The name "fs" is short for file system. This module allows you to 
interact with the internal file system of Node.js. 


Now, we will use the "£s" module to read the contents of a file. 


Reading the contents of a file 


Let’s use the "fs" module to read the file named file1.txt located in the current 
directory (where the test . js file is located). Here are the contents of this file: 


file1.txt file (in the directory where test.js is located) 


This is the content 
HE eie erlig iLe ede 
located in 


the current directory. 


The program that uses the "fs" module and displays the contents of the file is as follows: 


Reading and displaying the contents of the file (test.js file) 


var fs = require ("fs"); 


var data = fs.readFileSync("filel.txt") ; 
console.log("File content:") ; 


console.log(data) ; 
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We use the readFileSync () method defined in the "fs" module. It returns the 
contents of the file in the corresponding variable, which is then displayed. 


fc. Terminal 


Figure 6.7 - Displaying file contents using the “fs” module 


The contents of the file are displayed but as hexadecimal characters. Next, let’s display the 
contents of the file as strings. 


Displaying file contents as strings 


The contents of the file are displayed in the form of a buffer of bytes (see Figure 6.7). 
Node.js makes it easy to manipulate byte streams. It is also possible to view the contents 
of the file directly as strings by specifying the {encoding: "utf£-8"} option in the 
second parameter (options) of the readFileSync (name, options) method: 


Displaying file contents as strings (test.js file) 


var fs = require("fs"); 


var data = £s.readFileSync("filel.txt", { encoding : "utf£-8" 
}); 

console.log("File content:"); 

console.log(data) ; 
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The result is now displayed as strings (see the following figure): 


cs.) Terminal 


Figure 6.8 - Displaying file contents as strings 


The contents of the file are displayed. However, the program waits for the contents of the 
file to be retrieved in order to display them. By using the readFile () method instead of 
the readFileSync() method, it is possible to not block the program while waiting for 
the file. 


Using non-blocking file reading 


If you observe the previous readFileSync () method, you will see that the contents of 
the file are rendered in return for the method call. This means that the Node.js program is 
blocked while the file is being read (even if only for a few milliseconds). Within our small 
program, this is not noticeable, but in a case where the reading of the file is carried out by 
thousands of simultaneous users (for example, on a server), this will slow down access to 
the server. 


For this, Node.js has provided, for all blocking features such as this one, a non-blocking 
version of the method. Rather than returning the return result of the method (as before), 
we use a callback function indicated as a parameter of the method. In the case of reading 
the file, we will therefore use the readFile (name, options, callback) method, 
also defined in the "£s" module. The result of reading the file will be passed as 

a parameter in the callback function. 


Let’s use the non-blocking form of reading the file, using the readFile() method 
instead of the readFileSync () method: 


Using readFile() method to read the file (test.js file) 


var fs = require("fs"); 


console.log("File content:") ; 
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fs.readFile("filel.txt", { encoding : "utf-8" }, 
function(error, data) { 


console.log (data) ; 


P: 


console.log("The readFile() method was called"); 


Note 


The callback function uses the error and data parameters (in that order), 
which respectively correspond to a possible error message (nu11 if none), and 
to the contents of the file if the latter has been read. The options parameter 
indicated as the second parameter of readFile () is similar to that of the 
readFileSync(name, options) method. 


The result is displayed here: 


cs.) Terminal 


Figure 6.9 - Displaying file contents using the non-blocking readFile() method 


We can check in the result displayed above that the readFile() method is really 
non-blocking. Indeed, the text indicated following the call to the readFile() method 
is displayed in the console even though the file has not yet been read and displayed, which 
would have been impossible using the blocking method readFileSync(). 


Note 


We can therefore see that the use of modules internal to Node.js is done very 
simply by using the require (moduleName) instruction, and then by 
calling methods on the object returned by this instruction. 


We have seen how to create and use your own modules, and how to use internal 
Node.js modules. 


Now lets see how to use modules available on the internet using the npm command. 
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Using downloaded modules with npm 


In addition to the modules internal to Node.js, it is possible to import modules from the 
internet using the npm utility provided with Node.js. 


For this, the npm command is used (in a command interpreter) by indicating arguments 
that allow you to perform the corresponding actions on the imported modules. 


Using the npm command 


Here are some common uses of the npm command: 


npm install moduleName: Installs the indicated module in the local node _ 
modules directory. The module will only be accessible for the current application 
and not for other applications (unless it is installed again). 


npm install moduleName -g: Installs the specified module in the global 
node_modules directory. The -g option allows you to indicate that this module 
can be accessed by other applications because it is installed in the node_modules 
directory of Node.js (globally). 


npm link moduleName: It is possible that a module installed globally 

(with the -g option) is inaccessible (you get a module loading error during the 
require (moduleName) statement). In this case, it is necessary to run the npm 
link moduleName command. 


npm 11: Lists modules already present in the local node_modules directory. 
npm 11 -g;: Lists modules already present in the global node_modules directory. 


npm start: Starts the Node.js application according to the command indicated 

in the "scripts" key, then the "start" key of the package. json file. For 
example, if you specify "scripts": { "start": "node test.js" } inthe 
package .json file, you can type npm start instead of node test.js torun 
the test .js file. It is common to use npm start to start a Node.js application. 
This will be used to start an application under Express (see the next chapter). 


Note 


If you want to remove an npm-installed module, use the same commands as 
before, specifying uninstall instead of install. 
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As an example, lets create the following package . j son file in the directory of the 
test.js file: 


package.json file (in the same directory as test.js) 


{ 
lice" s f 


"start" : "node test.js" 


} 


Then use the npm start command to start the program: 


ic.) Terminal 


: \Documents \Node 


Figure 6.10 - Starting the Node.js application with npm start 


We can see that the npm start command thus makes it possible to execute the 


test.js program. The npm start command is often used to start a Node.js program, 


thanks to the mechanism explained above. 


Now lets see how to use modules written by other developers by downloading them 
using npm. 


Using a downloaded module with npm 


Let’s look at an example of using npm. Here, we will use npm to install the module named 


colors. It allows you to display colored text in the console. 
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Installing the colors module in the node_modules local directory 


We use the command npm install colors. The result of the installation of the 
"colors" module is displayed in the following figure. 


c+.) Terminal 


Figure 6.11 - Installing the colors module with npm 


Once the module has been installed by npm, you can see that the colors directory of the 
module has inserted itself into the node_modules local directory of the application. 


Using the features of the colors module 


One of the ways to have an overview of the functionalities offered by a module is to 
display the content of the object returned by the require (moduleName) instruction: 


Displaying contents of colors object returned by require(“colors”) (test.js file) 


Wee Colora = Ecrire Vcolorat) p 


console.log("colors = ", colors); 
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c+.) Terminal 


N Anv 


3 


Figure 6.12 - Displaying contents of the colors module 


For example, let’s use the last method listed in the module, namely the random () 
method. It allows you to transform a character string into a string with random colors for 
each character: 


Using the random() method of the colors module (test.js file) 


var colors = require("colors") ; 
console.log(colors.random("First text in random colors") ) ; 


console.log(colors.random("Second text in random colors") ); 


Note 


The random () method is used by prefixing its name with the name of the 
variable returned by require ("colors"), that is, with the name of 
the module. 
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The display of the following figure is obtained, in which each character displayed is 
a random color: 


cs.) Terminal 


Figure 6.13 - Using the colors module 


We have seen here the three types of modules used with Node.js: 


e Modules written by ourselves, for our own needs 


e Existing internal modules in Node.js, such as the fs module allowing access to the 
internal file system of Node.js 


e Modules downloadable using the npm command, such as the colors module 
used above 


All that remains is to use these different types of modules in our programs. We will 
discuss that later on. 


This brings us to the end of the chapter. 


Summary 


We have seen in this chapter how to create and use modules with Node.js, which are the 
essential components of programs created with Node.js. 


Whether the module is created by us, is an internal Node.js module, or is a module 
downloaded with npm, its use is the same in all cases. We use the require (moduleName) 
instruction and with the value returned in a variable, we access the functionality of 

the module. 


Next, we are going to study the Express module, which is one of the main modules used 
with Node.js, allowing us to easily structure our applications according to the rules of the 
MVC model, currently widely used. 
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Using Express 
with Node.js 


We saw in the previous chapter that a program for the Node.js server is an assembly of 
different modules. Many modules have been created by Node.js developers, which can be 
inserted into our programs using the npm utility (see Chapter 6, Creating and Using 
Node.js Modules). One of these modules is called Express. It is one of the most used 
modules with Node.js because it allows you to structure server programs according 

to the Model View Controller (MVC) model. 


In this chapter, we'll study how to create a Node.js application while respecting the 
characteristics of the MVC model by using the Express module. 


Here are the topics we will cover: 


Using the Node.js http module 
Installing the Express module 

The MVC pattern used by Express 
Using routes with Express 


Displaying views with Express 
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Node.js integrates into its internal modules the possibility to create a web server using the 
http module internal to Node.js. We first explain how to use this http module, and then 
we will see the contribution that the external Express module makes to more easily create 
a web application built according to the MVC model. 


Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript-from-Frontend-to-Backend/blob/main/ 
Chapter%207.zip. 


Using the Node.js http module 


The http module is an internal Node.js module. It is, therefore, directly accessible in 
our programs using the require ("http") instruction. With this module you can 
create a web server based on the HTTP protocol and thus display web pages in an 
internet browser. 


For creating a web server based on HTTP, we use the http. 

createServer (callback) method of the http module. The callback function 
indicated as a parameter is of the form callback (req, res), in which req 
corresponds to the request received, and res corresponds to the response to be sent to the 
browser. Depending on the request received, the corresponding response will be sent. 


Note 


In the req parameter, there is, among other things, the URL of the request 
received, thus making it possible to return, via the res parameter, the correct 
response to the browser according to this request. 


Let’s see in the following program how to use the createServer () method: 


Creating a web server using the http module (test.js file) 
var http = require("http") ; 
var server = http.createServer(function(req, res) { 


// display the received request in the console 


console.log ("Request received:", req.url); 
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// indicate that the response is HTML in utf-8 
res.setHeader("Content-type", "text/html; charset=utf£-8") ; 


// we always send the same response, regardless of the 
// request received 
res.write("<h1>") 
res.write("Good morning all"); 
res.write("</h1s") ; 
res.end(); 
I) § 
// make the server listen on port 3000 (for example) 


server.listen(3000) ; 


console.log("\nThe server was started on port 3000\n") ; 
console.log("You can make a request on:"); 
console.log("http://localhost:3000") ; 


The createServer () method returns an object, here used through the variable named 
server, on which we indicate to wait for requests coming from port 3000 (the one 
indicated in the server.listen(port) method). This means that each time URLs 

of the form http://localhost : 3000 are accessed via the browser, the program 
previously launched (with the node test.js command) will be activated and will 
display the result in the browser. 


Note 


The use of the server. listen (port) method is mandatory because 
it is not enough to create a server with the http. createServer () 
method. This server must also be listening (with server. listen (port 
) ) to HTTP requests addressed to it by browsers connecting to this server 
(here using a URL such as http://localhost : 3000). Port 3000 is 
used here, but another port number could be used (provided that this port is 
not already used by another server, which would cause an access conflict to 
know to which server the request on the port is addressed). 


We send the response to the browser using res. write (string) instructions. 

You must finish sending the response with the res . end () instruction, which means 
that the browser has received all the elements to display (the server waits to receive the 
res.end() instruction to display all the elements sent). 
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Note 

The res. setHeader () method is used to set HTTP header 
fields. Here, "Content-type" is set to the value "text/html; 
charset=utf£-8". 


Let’s launch the previous program by typing the command node test.js. The program 
displays a message, then waits for HTTP requests on port 3000: 


cs.) Terminal - node test.js 


Figure 7.1 - HTTP server waiting on port 3000 


To test the program, display the URL beginning with http: //localhost :3000 

in a browser. When an HTTP request uses port 3000 (the port on which the server is 
listening), the callback function indicated in the createServer (callback) method 
is activated and then the response is sent to the browser. 


Let’s type the URL http: //localhost : 3000 in the browser (see the following figure): 


| File Edit View History Bookmarks Tools Help = o x 
localhost:3000/ x + 
€ © ©Ọ BD localhost:300¢ . > = 


Good morning all 


Figure 7.2 - Viewing URL http://localhost:3000 in the browser 
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Regardless of the URL specified in the browser ( which uses port 3000), the display in the 
browser remains the same. For the display to be different for different URLs, it must be 
considered in the callback function by using the value of req. ur1, which contains the 
URL typed and returns different strings according to the request received. 


Using the Express module makes it easy to manage the different requests received and 
display different results depending on the URL entered. 


Installing the Express module 


Since the Express module is installed using npm, we type the npm install express 
command to install it. 


cs.) Terminal 


\VO 


Figure 7.3 - Installing the Express module with npm 


The Express module is now installed. 


Note 


A utility related to Express is also useful for creating the architecture of our web 
applications. This is the "express-generator" module (this module 
was previously included with Express but is now separate from it, hence it’s 
uploaded here). 
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Let’s also install the "express-generator" module using the npm install 
express-generator -g command. We use the -g option so that the express 
command defined in this module is accessible from any directory. 


cs.) Terminal 


Documen 


Figure 7.4 - Installing the “express-generator” module with npm 


Note 


You can verify that the installation is correct by typing the command 
express -h. Ifthe installation of the module is correct, help for the 


express command is displayed in the window (otherwise an error 
is displayed). 


Once these two modules are installed, you can create a first web application based 
on Express. 
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To do this, type the express apptest command to create the application named 
apptest. You should see the following result: 


ic.) Terminal 


Figure 7.5 - Creating the apptest application with Express 


This command creates an apptest directory containing the basic files to run the 
application. You must then type the three commands indicated at the end of the display: 
cd apptest,npm install,andnpm start. 


Once these commands are typed, open a browser and display the URL http: // 
localhost : 3000. 
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This is what you will see: 


(File Edit View History Bookmarks Tools Help m o x 
@ Express x + 
< © O D localhost J >» = 
Express 
Welcome to Express 


Figure 7.6 - Default app home page created with Express 


If we look at the source files of the application created in the apptest directory, we see 
the app.js and package .j son files, as well as the bin, node_modules, public, 
routes, and views directories. These directories are those that describe the MVC 
architecture used by Express, which we explain below. 


The MVC pattern used by Express 


The MVC model is an application architecture model allowing an application to be broken 
down into different parts: models, views, and the controller: 


e Models correspond to the data manipulated by the application. In general, this is 
data from databases. Node.js is closely tied to the MongoDB database, which is 
explored in the next chapter. 


e Views correspond to the visualization of data, for example, input forms and 
displayed lists. Each display corresponds to a view that will be in the views 
directory of the application. 


e ‘The controller allows navigation between the different views, depending on the data. 
For this, we use routes (in fact, URLs) that indicate the processing to be performed. 
The routes directory describes the routes used by the application (and the 
processing performed for each of them). 
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We can therefore see that the MVC model makes it possible to separate the processing, 
the display, and the data. This split is widely used in web projects and is the one proposed 
by Express. 


Let’s first look at how routing works in Express. This corresponds to the controller part of 
the MVC model. 


Using routes with Express 


Routes indicate the processing to be performed based on the requested URL. 
Compared to what we wrote when using the ht tp module of Node.js with the 
createServer (callback) method, this consists of writing the content of the 
callback (req, res) function according to the req request received. 


The routes are described in the app. j s file, which is the main file created by Express. 
Let’s examine its content. 


The initial content of the app.js file 


To understand how routes work in Express, open the app. js file located in the main 
application directory, and you will see the content of this file, like this: 


app.js file 


var createError = require('http-errors') ; 
var express = require('express') ; 

var path = require('path') ; 

var cookieParser = require('cookie-parser') ; 


var logger = require('morgan') ; 


var indexRouter = require('./routes/index') ; 


var usersRouter = require('./routes/users') ; 

var app = express(); 

// view engine setup 

app.set('views!', path.join( dirname, '‘views')); 


app.set('view engine', 'jade'); 


app.use (logger ('dev')) ; 
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app.use(express.json()); 
app.use (express.urlencoded({ extended: false })); 
app.use(cookieParser()) ; 

( 


app.use(express.static(path.join(_ dirname, 'public')))j; 


app.use('/', indexRouter) ; 


app.use('/users', usersRouter) ; 


// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
next (createError (404) ); 


}); 


// error handler 

app.use(function(err, req, res, next) { 
// set locals, only providing error in development 
res.locals.message = err.message; 
res.locals.error = req.app.get('env') === 'development' ? 
eme s [Ihe 


// render the error page 
res status (err. status || 500); 


res.render('error') ; 


p); 


module.exports = app; 


This file describes how the application built with Express works. It uses the app variable, 
which is the return from the express () function call and symbolizes the application. 
On this app object, the use () method is used many times, which makes it possible to 
add processing to be performed for each request received on the server. 


For example, app . use (logger ("dev") ) triggers the Logger () function for each 
request received on the server. This is why the server console displays the URL that was 
requested in the browser during each request to the server. 
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By having displayed in the browser the URLs http: //localhost : 3000 and 
http://localhost :3000/users, we obtain the following in the server console. 


Figure 7.7 - Display of URLs in the server console 


Now, let’s look at the meaning of the lines displayed in the server console. 


Different types of routes possible 


In the previous figure, you'll notice that the word GET is displayed in front of each URL: 
GET /, GET /users. 


The word GET means that the URL / or /users is accessed by an HTTP request of the 
GET type. The GET type is the one used when the accessed URL is displayed in the address 
bar of the browser, for example, when you type it directly or when you click on 

a link on a page. 


Note 


Other types of HTTP requests exist. They make it possible not to display the 
corresponding URL in the address bar of the browser, and thus to hide it 
from users. For example, if the URL for deleting records from the database 
was visible in the browser’s address bar, it would suffice to refresh the page to 
continue deleting records from the database. Hence the interest in other types 
of HTTP requests that allow the current URL to be hidden. 
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The other types of HTTP requests (in addition to GET) are mainly PUT, POST, and 
DELETE type requests. These types of requests are used in programs to signify an action 
to be performed on one or more pieces of data (called resources): 


e GET means reading a resource. 
e POST means creating a resource. 
e PUT means updating a resource. 
e DELETE means deleting a resource. 
Although multiple types of HTTP requests exist, these are the main ones. They are used 


to manipulate resources, allowing them to be created (POST), updated (PUT), deleted 
(DELETE), and read (GET). 


Note 


A route is the association of an HTTP request with a URL. For example, the 
GET /users route associates the /users URLwiththe HTTP GET 
request, while the DELETE /users route associates the same /users 
URL with the HTTP DELETE request. Although these routes use the same 
URL, they are different routes because the HTTP requests are different. 


Now that we've seen the different types of HTTP requests used, let’s look at how Express 
uses them internally. 


Analyzing routes defined in the app.js file 


The app.use() method is also used to define new routes, that is, to define the 
processing that will be performed for each new URL used (with the associated 
request type). 


The app.use (url, callback) method is used to define the processing to be 
performed when the specified URL is activated. As the type of request is not indicated 
here, all types of requests will activate the treatment indicated in the callback function. 
To indicate the type of request, you must use methods similar to app . use () . These are 
the app.get (), app. put (), app. post (),and app.delete() methods. 
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Note 


The callback function of the form callback (req, res, next) 
returns the response to the browser. The next () parameter corresponds to 
a function to be called at the end of the callback if the processing must 
continue in the next callback function (if the processing to be performed is 
handled by multiple callback functions). 


The routes already defined in app. js are / and /users, thus making it possible to 
run the processes associated with these routes. These routes are examples to show how 
to implement routes in the app. j s file. The processing instructions are defined in the 
indexRouter and usersRouter functions. These functions are the variables used 
in return for the instructions require ('./routes/index') and require('./ 
routes/users'). The processing of routes is therefore done here in the index.js 
and users. js files defined in the routes directory. 


Let’s open these two files and analyze their contents: 


index.js file (routes directory) 


var express = require('express'); 


var router = express.Router() ; 


/* GET home page. */ 


router.get('/', function(regq, res, next) { 
res.render('index', { title: 'Express' }); 

h); 

module.exports = router; 


users.js file (routes directory) 


var express = require('express') ; 


var router = express.Router() ; 


/* GET users listing. */ 
router.get('/', function(reg, res, next) { 


res.send('respond with a resource’) ; 
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}); 


module.exports = router; 


Each of these files uses the router.get (url, callback) method, meaning that the 
route is associated with the GET type request. The URL given is / (it will be concatenated 
with the URL given in the app. js file), followed by the callback function of the form 
callback(req, res, next). The next parameter corresponds to a function to call 
if the processing must continue in the callback function that follows (if such a function 
exists, which is not the case here). 


The processing performed in each of the callback functions consists of sending the 
response, which will be displayed in the browser. Here, we use the res. send () and 
res .render () methods, which allow the response to be sent: 


e The res.send() method is similar to res.end() (defined in the "http" 
module of Node.js), but also allows you to indicate that you are using HTML and 
utf-8 characters. Only one call to the res . send () method must be made in the 
processing, otherwise, an error occurs. 


e The res.render() method allows an external file (called a view) to be displayed. 
Views are written in a special language that depends on the format of the view. 
By default, the views used by Express are JADE files, but it is possible to use 
other formats. 


Here, the view displayed by the res. render () method corresponds to the index. 
jade file located in the views directory. Its contents are as follows: 


index.jade file (views directory) 


extends layout 


block content 
MIC title 
p Welcome to #{title} 


This file is written using a particular syntax, called JADE. The file will be transformed 
into HTML code by Express before being sent to the browser (which can only 
interpret HTML). 
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Note 


Express allows files associated with views to be written using a variety of 
syntaxes. The most common are JADE and EJS. 


We will explore the JADE syntax in the Displaying views with Express section in 
this chapter. 


Note that the app . js file allows you to configure the directory associated with the 
views and the syntax used in the views. Here are the corresponding instructions from the 
app .js file: 


Configuring views (app.js file) 


app.set('views!', path.join( dirname, ‘views')); 


app.set('view engine', 'jade'); 


We have described the routes already listed in the app. j s file. Let’s see how to create new 
routes in this file. 


Adding a new route in the app.js file 


Adding a new route in the app . js file can be done either by writing the processing directly 
in the app. js file or by creating an external file that will be in the routes directory. 


Warning 


Any modification of the app . j s file requires restarting the server by 
performing the nom start command; otherwise, the modifications are not 
taken into account. 


Let's look at these two ways to create a new route. 


Adding route processing directly in the app.js file 


Let’s add the /clients route activated following a GET type request. It displays the list 
of clients. We use the app. get () method to define the route: 


Add the GET /clients route 


app.use('/', indexRouter) ; 


app.use('/users', usersRouter) ; 
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app.get("/clients", function(req, res, next) { 
res.send("<h1l>Client list</h1>") ; 


}); 
The result is displayed in the following figure (Figure 7.8). 


Creating an external file to define route processing 


We use the same principle as that used for the GET / and GET /users routes defined 
in the app. js file. We create the clients. js file in the routes directory, which 

will be included in the app. js file by means of the statement clientsRouter = 
require ("./routes/clients). The route is defined in app. js with the statement 
app.use("/clients", clientsRouter). 


The clients. js file describing the processing performed on the route is as follows: 


clients.js file (routes directory) 


var express = require('express') ; 


var router = express.Router() ; 


routerrget Ar uneton (meq, Ges amex) { 
res.send("<hisClient list</h1>"); 

DE 

module.exports = router; 


In both cases, the result is the same, as seen in the following figure. 


(File Edit View History Bookmarks Tools Help = o x 


localhost:3000/clients x + 


= Œ QO D localhost:3000/cdlient a > 


Client list 


Figure 7.8 - Displaying the GET /clients route 


Displaying views with Express 231 


We studied the controller part of the MVC model using the route system defined in 
Express. Now let’s see how Express allows us to manage the view part of the MVC model. 


Displaying views with Express 
A view is an external file used to describe the display that you want to view. Specific 
syntaxes have been created to program the view, for example, JADE or EJS syntaxes. 


The res.render (name, obj) method is used to display the name view using any 
properties provided in the obj object. The view is a file defined in the views directory 
using JADE syntax or another. 


One of the features of Express is to allow you to create views using the desired syntax. The 
JADE syntax is offered as standard by Express, but other syntax support libraries can be 
added with npm. 


The JADE syntax is, therefore, the one used by default in Express. It makes it possible 
to replace HTML tags with their tag (for example <h1> simply becomes h1), and the 
indentation of tags in the code makes it possible to specify their nesting. It is also no 
longer necessary to close the tag previously opened because the indentation allows you 
to see the nesting of the tags. 


Note 


Full JADE documentation can be found at https: //jade-lang.com/. 


Let’s use JADE to display the previous client list. We create the clients. jade view in 
the views directory, and we indicate in clients .js that we display this view when 
accessing the GET /clients route: 


clients.js file (routes directory) 


var express = require('express') ; 


var router = express.Router() ; 


counter. eS (1/2, Tunein Ee, Mes, ims) { 
res.render ("clients") ; // display clients.jade view 
// (.jade extension is enabled by 
// default) 


DE 


module.exports = router; 
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Note that if you do not indicate the file extension of the view (for example, by writing 
res.render ("clients") ), the extension used will be the one indicated in the 
instruction app.set ('view engine' , 'jade') fromapp.js. 


If, on the other hand, you specify an extension to the view file, it will be the one used 
to display the view even if it is different from the one configured in app . j s. The view 
clients. jade is as follows: 


clients.jade file (views directory) 


hi Client list 

ul 
ILa IBALL Calalkiaieeya 
li Barack Obama 
li Joe Biden 


Notice the indentation of the tags. The u1 tag is at the same level as the h1 tag, otherwise, 
it would be seen as included in the h1 tag. The 1i tags are shifted to the right to show 
their inclusion in the preceding u1 tag. The offset must be at least one character. Because 
of the offsets, we do not use a closing tag as in HTML. 


Let’s restart the server with npm start because one of the routing files has been modified. 


Note 


Editing files associated with views does not require a server restart, unlike the 
app. js file and files associated with routes (in the routes directory). 


Once the server restarts, lets display the URL http: //localhost : 3000 again: 


| File Edit View History Bookmarks Tools Help Ee m x 
localhost:3000/clients x + 


€ CG QO D ocalhost:3000/clients % » = 


Client list 


e Bill Clinton 
e Barack Obama 
e Joe Biden 


Figure 7.9 - View displayed using JADE syntax 
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The list of clients is, in this example, entered directly into the JADE view. It is better to 
pass it as parameters using the second parameter of the res. render (name, obj) 
method. The clients. js file then becomes the following: 


clients.js file (routes directory) 
var express = require('express') ; 


var router = express.Router() ; 


LouLerAget (l/l UnC Eron (reqs kes mex) { 


res.render("clients", { 


clients : [ 
{ firstname : "Bill", lastname : "Clinton" }, 
{ firstname : "Barack", lastname : "Obama" }, 
{ firstname : "Joe", lastname : "Biden" }, 
] 
}); 
I) § 
module.exports = router; 


The obj parameter of the res. render ("clients", obj) method is an object 
containing the list of clients. 


The clients. jade view uses this passed object as follows: 


clients.jade file (views directory) 


mwi Cliene Ila 


ul 
li #{clients[0].lastname + " " + clients[0] .firstname} 
li #{clients[1].lastname + " " + clients[1].firstname} 
li #{clients[2].lastname + " " + clients[2] .firstname} 


The obj object passed in parameters is used in the JADE view, by using its clients 
property here. 
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JADE Syntax 


JavaScript statements can be used in the JADE view by surrounding them 
with #{ and }. Anything between these two markers will be considered 
JavaScript code. 


You can also use a syntax simplification allowed by JADE, by writing the = sign directly 
after each li tag. This means that everything following on the line must be interpreted in 
JavaScript. We can use this simplification of writing here. 


Let’s write the clients. jade view as follows: 


clients.jade file (views directory) 


wil Cilaleiote, Ligg 


ul 
li= clients[0].lastname + " " + clients[0] .firstname 
li= clients[1].lastname + " " + clients[1].firstname 
li= clients[2].lastname + " " + clients[2] .firstname 


Rather than listing each element of the clients array in the view, you can also perform 
a loop using the each statement of the JADE syntax to iterate over a JavaScript array. 


The clients. jade view therefore becomes the following: 


clients.jade file (views directory) 


wii Cilakeiote lai ete 
Wl 
each client in clients 


li= client.lastname + " " + client.firstname 
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The writing of the view is simplified, but you really have to take into account the 
indentations of the lines otherwise the view will not be displayed. 


"File Edit View History Bookmarks Tools Help = o x 
localhost:3000/clients x + 


< C $, D localhost:3000/client eg S 


Client list 


e Clinton Bill 
e Obama Barack 
e Biden Joe 


Figure 7.10 - List of clients displayed by the each statement 


We see in this example that the JADE syntax makes it easy to display lists of data in the 
views of the application. 


With this, we come to the end of this chapter. 


Summary 


The Express module makes it possible to structure your application efficiently by allowing 
(thanks to the MVC model it uses) you to separate the management of routes, the views 
displayed, and the management of data. 


We have explained how to write the views of the application using the JADE syntax 
provided by default by Express. Other syntaxes, for example, the EJS syntax, are also 
available by downloading them via npm. 


We have also seen the importance of the app. js file created by Express, and the use 

of HTTP requests such as GET, POST, PUT, and DELETE. We will see in Chapter 9, 
Integrating Vue.js with Node.js, the importance of these HTTP requests to build a MEVN 
application (short for MongoDB, Express, Vue.js, Node.js) that manipulates the 
MongoDB database. 


Indeed, data management is often done using the MongoDB database, the use of which 
we will explore in the next chapter. 
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Using MongoDB 
with Node.js 


MongoDB is the database traditionally associated with Node.js. It is a NoSQL type 
database, which means that SQL will not be used to access the information it contains. 


MongoDB is a document-oriented database in which we store so-called documents; that 
is, a data structure of any type, such as information written on a sheet of paper (which is 
then equivalent to a document). Several sheets of paper, thus corresponding to several 
documents, form what is called a collection. 


An example of a document is, for example, the first name, the last name, and the 
address of a customer. Aggregated information from multiple customers would be called 
a collection. 


In this chapter, we'll study how to use MongoDB in conjunction with Node.js in order to 
store, read, delete, or update information in the database. 


Inserting, searching, updating, or deleting data are the main actions that can be performed 
in a database. Therefore, in this chapter, we'll see how to perform these operations with 
the MongoDB database. 
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Here are the topics covered in this chapter: 


e Installing MongoDB and the mongoose module 
e Connecting to the MongoDB database 

e Creating documents 

e Searching documents 

e Updating documents 


e Deleting documents 


Let’s start by installing MongoDB and the mongoose module, which will allow MongoDB 
to be used in Node.js programs. 


Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript -from-Frontend-to-Backend/blob/main/ 
Chapter%208.zip. 


Installing MongoDB 


The MongoDB database is independent of Node.js, which requires installing it 
separately. To do this, go to the site https: //www.mongodb.com/docs/manual / 
administration/install-community/. Download the version suitable for 
your system. 


Once MongoDB is installed, verify that the installation is correct by typing the mongo -h 
command in a command interpreter. The mongo command is located in the Server/ 
x.x/bin directory of MongoDB, where x . x is the version number of MongoDB installed. 


Note 


At the time of writing, the mongo utility is available directly when installing 
MongoDB. However, it is possible that this utility will soon be available 
separately and called mongosh. In this case, download this utility from 
https: //www.mongodb.com/docs/mongodb-shel1/ 
install/. 


The mongo command will simply be replaced by the equivalent mongosh 
command. Both commands work identically. 
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After installing MongoDB, we will look into the mongo (or mongosh) utility. The mongo 
utility makes it easy to see the contents of database collections, without having to write 
program lines. It is therefore useful for checking, for example, whether a document has 
been correctly inserted into a collection, or that its deletion has been successful. Let’s see 
how to use the mongo utility. 


Using the mongo utility 


The mongo utility enables you to easily view databases and the collections they contain. 
The mongo utility is launched by simply typing the mongo command in a command 
interpreter. The program then waits for database access commands, or the exit 
command to exit. 


Here is the list of the main commands available in the mongo utility: 


show dbs: This shows a list of existing databases. A database will be visible here 
only if it contains at least one collection. 


db=connect ("mydb_test"): This is to connect to the database mydb_test. 
The db variable will then be used to access the database collections. 


show collections: This shows the collections of the connected database. 
A collection will be present if it contains at least one document. 


db.clients.find(): This shows all documents in the clients collection. 


db.clients.find({name:"Clinton"}): This lists documents in the 
clients collection whose name is Clinton. 


db.clients.find() .sort ({name:1}): This sorts documents in ascending 
order of the name field. Use {name: -1} for descending sort. 


db.clients.count (): This counts the number of documents found in the 
clients collection. 


db.clients.renameCollection("clients2"): This renames the 
clients collection to clients2. 


db.clients.drop (): This drops the clients collection (all documents 
are dropped). 


db. dropDatabase (): This drops the connected database (all collections 
are removed). 


Other commands exist, in particular, for inserting, updating, or deleting documents in 
a collection. But since these actions are performed through the mongoose module instead, 
we will describe them using the mongoose module. 
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Installing the mongoose module 


To establish the relationship between MongoDB and Node.js, several npm modules have 
been created. The most widely used one currently is the mongoose module. It is installed 
in the node_modules directory of the current directory by typing the npm install 
mongoose command. 


Ex] Terminal 


Figure 8.1 - Installing the mongoose module 


Once mongoose has been downloaded by npm, we check whether it is accessible for our 
programs. Let’s display the mongoose version for our programs. We write this snippet in 
the file test.js: 


Displaying mongoose version (test.js file) 


var mongoose = require("mongoose") ; 


console.log("mongoose version =", mongoose.version) ; 


Let’s use the node test.js command to run the previous program: 


ic.) Terminal 


Figure 8.2 - Checking that mongoose is accessible 


Warning 

If you get an error loading the mongoose module, it’s probably because you 
installed it globally (with the -g option). In this case, just type the npm link 
mongoose command in the terminal to get rid of the error. 
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The mongoose module will allow us to use the MongoDB database to create documents, 
search them, update them, or destroy them. These are the classic operations that can be 
performed on a database. 


But to be able to perform these operations, it is necessary to first connect to the database. 


Connecting to the MongoDB database 


All operations to access MongoDB require establishing a connection with it. Now let's see 
how to establish a connection with MongoDB. 


The mongoose. connect (url) instruction connects the mongoose module 

to the database specified in the url parameter. The url parameter is of the form 
"mongodb://localhost/mydb test" to connect to the mydb_test database on 
the localhost server. 


The database will actually be created (and visible with the execution of the show dbs 
command of the mongo utility) when the first document is inserted into it: 


Connecting to the mydb_test database (test.js file) 


var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test"); 


consolle. llog("Connecting to mydb test database ian progress...) ; 


Let’s run the previous program: 


cs.) Terminal - node test.js 


Figure 8.3 - Database connection 


To know whether the connection to the database has actually been made, mongoose sends 
the open event (if the connection was successful) or the error event (if the connection 
fails) on the mongoose. connect ion object. 
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Next, we will take these two events into account and integrate them into the previous 
program. This is done using the on (event, callback) method defined on the 
mongoose. connection object: 


Note 


Theon(event, callback) method is used to process the reception 
of the event and to associate it with the processing described in the 
callback function. 


Using open and error events on database connection (test.js file) 


var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


mongoose.connection.on("error", function() { 
console.log("mydb test database connection error") 
}); 

mongoose.connection.on("open", function() { 
console.log("Successful connection to mydb test 
database"); 


}); 


console. log ("Connecting to mydb test database in progress. 1); 


Let’s run the previous program: 


cs. Terminal - node test.js 


Figure 8.4 - Successful connection to the database 


We have seen how to connect to the database. We will therefore be able to create 
documents in a collection of the database. 
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Creating documents in MongoDB 


Once the database has been accessed, you can create documents in it. 


A document will be inserted into a collection. A collection will therefore group 
together a set of documents. The database will therefore be a set of collections, 
each containing documents. 


In order to be able to insert documents, mongoose asks us to describe the structure of 
these documents. For this, we will use schemas and models. 


Describing document structure using schemas 
and models 


To access the documents in the database, the documents must be described by means 
of schemas and models. 


Definitions 
A schema allows you to define the structure of a document that is stored in 
a collection. The structure is defined according to MongoDB data types. 


A model is the representation of a schema as a JavaScript class. It links a schema 
to a MongoDB collection. 


Let’s look at how to create a schema and then a model. 


Creating a schema 


A schema defines the fields of a document using Node.js internal object classes. These are 
the following classes: 


e String: This defines a string of characters. 
e Number: This defines a numeric field. 

e Boolean: This defines a Boolean. 

e Array: This defines an array. 

e Buffer: This defines a buffer of bytes. 

e Date: This defines a date. 


e Object: This defines a JavaScript object. 
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The mongoose. Schema (format) method is used to define the schema associated with 
the document. The format parameter is a JavaScript object that associates each field in 
the document with the type (in the above list) that represents it. 


Let’s create the schema defining a client. A client is characterized by its lastname, 
firstname, and address. All these fields are of type String: 


Defining the schema associated with a client (test.js file) 


var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ({ 
lastname : String, 
firstname : String, 


address : String 


}); 


Now let’s explain how to create a model from the schema. 


Creating a model 


The schema is then used to define the model associated with the document. The model 
corresponds to a JavaScript class that will be used to create the documents in a collection. 


The mongoose.model (collection, schema) method returns a JavaScript class 
associated with the schema. This class is called a model. 


Documents created with this class will be inserted into the specified collection. The 
collection may not exist before inserting a document. A collection requires at least one 
document within it. 


Summary 


A schema specifies the format of a document stored in a collection, 

while a model is a JavaScript class used to create each such document. 

We associate a document schema with a collection using the mongoose. 
model (collection, schema) method call. This returns a JavaScript 
class that can then be used to generate individual document instances. 
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Let’s create the Client class, which will create the clients that will be stored in the 
clients collection. It is traditional to name the collection based on the name of the 
model, in lowercase and in plural: 


Creating the Client model from the schema (test.js file) 


var mongoose = require("mongoose") ; 


mongoose. connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ({ 
lastname : String, 
firstname : String, 


address : String 


p; 


// creation of the Client class associated with the clients 
// collection 
var Client = mongoose.model ("clients", clientSchema) ; 


The Client class is now available to create the documents that will be inserted into the 
clients collection. 


Creating the document 


There are two methods for creating the documents in a collection. These are the doc. 
save (callback) instance method and the create (doc, callback) class method. 
Let's look at these two ways to create documents in a collection. 


Let’s start by using the doc. save (callback) instance method. 


Using the doc.save(callback) instance method 


The client document is created in memory from the previously created class (by means of 
var client = new Client () ), then saved in the clients collection by means of 
the client .save() method. 
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The callback function allows processing when the document has finished being inserted 
into the collection. This is especially useful if it is necessary to wait for the document to be 
inserted into the database before continuing processing: 


Using the save() instance method to save document (test.js file) 


var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ( { 
lastname : String, 
firstname : String, 


address : String 


IIg 


// creation of the Client class associated with the clients 
// collection 


var Client = mongoose.model ("clients", clientSchema) ; 


// create the document in memory 


var c = new Client({lastname :"Clinton", firstname:"Bill", 
address: "Washington"}) ; 


console.log("Before the save() statement") ; 


// save the document in the database (clients collection) 
c.save(function(err) { 
if (!err) console.log("The client is inserted into the 
collection") ; 


}); 
console.log("After the save() statement") ; 


The callback function takes the err parameter, which corresponds to a possible error 
message (otherwise, it is nu11). 
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We get the following result: 


©] Terminal - node test.js 


Figure 8.5 - Using the doc.save() instance method 


Using the traces displayed in the console, we can see that the message The client is 
inserted into the collection is displayed after the other messages, which 
means that inserting a document is not blocking other tasks (i.e., other tasks can be done 
while waiting for insertion in the database). 


The save () method can also be used as a Promise object (see Chapter 2, Exploring 
the Advanced Concepts of JavaScript). For this, we use the then (callback) method 
afterward, possibly followed by the catch (callback) method to process the cases of 
error when calling the save () method. 


In this case, we write the following: 


Using the save() method as a Promise objet 


c.save().then(function(doc) { 

console.log(doc) ; 

console.log("The client is inserted into the collection") ; 
}) .catch(function(err) { 

console.log(err); // display the error 


p; 


Now let’s see the other method of creating a document with the create (doc, 
callback) class method. 
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Using the create(doc, callback) class method 


A class method means that we can use the method without having instantiated an object, 
unlike an instance method, which requires that the object of the class be created (with 
c = new Client ()). 


To create the document associated with the client identified by {lastname: "Obama", 
firstname:"Barack", address: "Washington" }, we would write the following: 


Using the Client.create(doc, callback) class method to save document 
(test.js file) 


var mongoose = require ("mongoose"); 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ( { 
lastname : String, 
firstname : String, 


address : String 

p); 

// creation of the Client class associated with the clients 
// collection 


var Client = mongoose.model("clients", clientSchema) ; 


console.log("Before the create() statement") ; 


// save the document in the database (clients collection) 


Client.create({lastname:"Obama", firstname:"Barack", 
address:"Washington"}, function(err, doc) { 


console.log("The client is inserted into the collection", 
doc) ; 


}); 


console.log("After the create() statement") ; 
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The create(doc, callback) class method is used by prefixing it with the name of 
the JavaScript class (here, the Client class). 


The document to be saved is written in the form of a JavaScript object (JSON format) but 
can also be an object instantiated with c = new Client (). 


The callback function of the form callback (err, doc) is executed at the end of 
saving the document in the database. This callback function is useful if you want to 
perform a process while being certain that the document has been saved in the collection. 


Note 

Note that the callback function callback (err, doc) ofthe 
create(doc, callback) method has the two parameters err 
and doc, which are the possible error and the document saved in the 
database, respectively. 


Let’s run the previous program: 


ts. Terminal - node test.js 


Figure 8.6 — Using the Client.create() class method 
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The saved document has the fields indicated in the format associated with the model 
(here, the lastname, firstname, and address fields), but also the idand_v 
fields, added automatically by MongoDB: 


e The_ id field is a field used by MongoDB to give a unique identifier to each 
document in a collection. It plays the role of a primary key. 


e The v field isa field added by mongoose, associated with the document version 
number. We will not use it here. 


As with the save () instance method, the create (doc) class method can be used 
as a Promise object. For this, we do not use the callback parameter in 

the create (doc) method and instead use the then (callback) and 

catch (callback) methods following the create (doc) method call. 


For example, we could also write the following: 


Using create() method as a Promise object 


Client.create({lastname: "Obama", firstname:"Barack", 

address:"Washington"}) .then(function(doc) { 
console.log("The client is inserted into the collection", 
doc): 


}); 


In the previous examples, we have inserted two documents into the clients collection. 
Let’s use the mongo utility to display the inserted documents and verify the documents 
that are present in the collection. 


Using the mongo utility to view inserted documents 


To display the inserted documents, use the mongo utility and type the 
following commands: 


1. db=connect ("mydb_test") to connect to the database 


2. show collections to show the collections already present 
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3. db.clients.find() to display documents from the clients collection 


db=connect(“mydb_ test”) 
connecting to: mongodb://127.0.0.1:27017/mydb test 
Implicit session: session { "id" : UUID("5b1032bf-6cee-4ace-b 
407-d42a5bb6760e") } 
MongoDB server version: 5.0. 
nydb_ test 


> 
> show collections 


db.clients.find() 
"id" : ObjectId("622cea56a5108be Je8b"), “lastname” 
"Clinton", “firstname” : "Bill", “a " : “Washington”, 
ð} 
"id" : ObjectId("622cea6f296e71dfa61 
"Obama", “firstname” : “Barack”, 
Vie sui} 


Figure 8.7 - Using the mongo utility to view documents 


We thus check that the two documents of the clients collection are indeed present. 


Let’s see how to search for them with mongoose module methods. 


Searching for documents in MongoDB 


Once the documents have been inserted into the collection, they can be searched for using 
the find () class method. 


Note 


The find () method is a class method, which means that it is used by 
prefixing it with the class name associated with the model, for example, 
Client.find(). 


The find(conditions, callback) method is used to perform a search in the 
collection associated with the model, then to retrieve the results of the search in the 
callback function indicated as a parameter. 
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Let’s take an in-depth look at the parameters: 


e The conditions parameter is a JavaScript object used to specify search 
conditions. If no condition is specified, do not indicate anything (or indicate an 
empty object {}). 


e The callback function is of the form callback (err, results) where err is 
an error message (nul1 otherwise) and results is an array containing the search 
results (empty [] if none). 


There is also the findOne (conditions, callback) class method, which allows 
you, on the same principle, to find only the first document that satisfies the search. The 
callback function is of the form callback (err, result) where result is the first 
document found. 


Note 


The findOne (conditions, callback) method will be useful if you 
are looking for a single document, for example, from its identifier id. 


You can also use the find (conditions) and findOne (conditions) 

methods without specifying the callback function as a parameter. For this, we use the 
then (callback) and catch (callback) methods to perform the processing on 
the documents found or in the event of an error. We can also use the exec (callback) 
method, as explained in the following section. 


Let us now examine how to write the conditions parameter used in the two methods 
find() and findOne(). 


Writing search conditions 


In the conditions parameter, we indicate an object whose properties are the fields 
of the documents in the collection, and the associated values are the values sought for 
the field, of the form {field1:valuel, field2:value2...}, for example, 
{lastname:"Clinton", firstname:"Bill"}. 


Other properties can be used as keywords to express conditions. They start with 
the $ sign, such as: Sor, $exists, $type, $where, $gt, and $1t. 


Note 


A list of possible keywords can be found here: https: //docs.mongodb. 
com/manual/reference/operator/query/. 
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Here are some examples of conditions: 


}: All documents in the collection. You can also write find () , which is 
equivalent to find({}). 


lastname: "Clinton" }: All documents whose lastname is Clinton. 


lastname: "Clinton", firstname: "Bill" }: All documents whose 
lastname is Clinton and first name is Bill. 


Sor: [{ lastname: "Clinton"}, { firstname: "Jimmy" }] }: 
All documents whose lastname is Clinton or first name is Jimmy. 


lastname: /obama/i_ }: All documents whose lastname contains the string 
obama regardless of case (regular expression). 


address: { $exists: true} }: All documents whose address field 
exists, regardless of its type (String, Object, etc.). 


address: { Sexists: true, $type: 2 } }: All documents whose 
address field exists, and which is of type 2 (String). 


"address.city": "Washington" }: All documents containing the 
address field that itself has a city field whose value is Washington. 


lastname: {$type:2}, Swhere:"this.lastname. 

match (/*Clinton|carter$/i)"}: All documents whose lastname is a string 
(type = 2) and whose lastname begins with Clinton or ends with carter, 
regardless of case. You must indicate that the lastname is a character string, 
otherwise you may have an error with names that are not in this form. 


{lastname: { $gt: "J", $lt: "S" }}: All documents whose lastname is 
greater than "J" and less than "s". 


{lastname: { $in:["Clinton", "Carter", "Obama"] }}: All 
documents whose lastname is Clinton, Carter, or Obama. 


Once the search conditions have been expressed, the results found must be retrieved and 
displayed. Let’s see how to do it. 


Retrieving and displaying the results 


Whatever the condition expressed, the corresponding results can be retrieved in the 
callback function associated with the find() method, of the form callback (err, 
results). We will also see that it is possible to use the exec (callback) method to 
retrieve the results. 


Let's look at these two ways to retrieve search results. 
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Using the callback parameter of the find(conditions, 
callback) method 


Let’s find all clients whose lastname is Clinton or firstname is Barack. The result will 
be displayed in the callback function: 


Displaying clients whose lastname is “Clinton” or firstname is “Barack” 
(test.js file) 


var mongoose = require ("mongoose"); 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ({ 
lastname : String, 
firstname : String, 


address : String 


D; 


// creation of the Client class associated with the clients 
// collection 


var Client = mongoose.model("clients", clientSchema) ; 


Client.find({ $or : [ { lastname : "Clinton" }, { firstname 
"Barack"} ] }, function(err, clients) { 


console.log(clients) ; 


}); 
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We obtain the result shown in the following figure: 


cs.| Terminal - node test.js 


iments \Node. 


"622cea6F296e71dfa619a7Fa"™ 


Figure 8.8 - Displaying search results with find(conditions, callback) 


The callback function can be expressed in the find () method as before, or be specified 
in the exec () method used after the find () method. Let us now examine this 
second possibility. 


Using the exec(callback) method 


Another way to retrieve results is to use the exec (callback) method following the 
find(conditions) method. The find(conditions) method is used here without 
indicating a callback function in its parameters because the callback function is indicated 
in the exec (callback) method. 
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The advantage of this is that we can insert new methods between the find () method 
and the exec () method. For example, if we want to add as additional conditions that the 
lastname field must be equal to Clinton, we can write the following: 


Adding as search conditions that lastname is “Clinton” (test.js file) 


var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ({ 
lastname : String, 
firstname : String, 


address : String 


})a 


// creation of the Client class associated with the clients 
// collection 


var Client = mongoose.model ("clients", clientSchema) ; 


Client.find({ $or : [ { lastname : "Clinton" }, { firstname : 
"Barack"} ] }) 


-where ("lastname") 
-eq("Clinton") 
.exec (function (err, clients) { 


console.log (clients); 


}); 


Note 


Methods such as where (field) and eq (value) can be chained after 
the find () method. The execution of the search will be effective when 
calling the exec () method. Other usage possibilities are described here: 
https: //mongoosejs.com/docs/api/query.html#query__ 
Query-where. 


You can also use the exec (callback) method without specifying the callback function 
as a parameter. For this, we use the then (callback) and catch (callback) 
methods to perform the processing on the documents found or in the event of an error. 
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We write the following for this: 


Using exec() method as a Promise object 


Client.find({ Sor : [ { lastname : "Clinton" }, { firstname 
"Barack"} ] }) 


.where ("lastname") 
3 Sxe) (OC ILatiaeoyal") 
.exec () 
.then(function(clients) { 
console.log(clients); // display the clients 
}) 
.catch(function(err) { 


console.log(err); // display the error 


DE 
The result is displayed in the following figure. 


8. Terminal - node test.js 


Figure 8.9 - Using the exec(callback) method 


We've learned how to create documents, then search for them. Now let’s look at how to 
update them. 


258 Using MongoDB with Node.js 


Updating documents in MongoDB 


It is possible to modify one or more documents of a collection. The updateOne () and 
updateMany () class methods are used respectively to modify the first document found 
or all of the documents found. 


These two methods have similar parameters: 


e updateMany(conditions, update, callback) indicates modifying the 
data indicated in the update object on the documents specified by the indicated 
conditions. The callback function of the form callback (err, response) 
is called after the update. 


e updateOne (conditions, update, callback) indicates modifying the 
data indicated in the update object on the first document found by the indicated 
conditions. The callback function of the form callback (err, response) 
is called after the update. 


e Only the conditions and update parameters are mandatory in the 
two methods. 


Warning 


If the callback is not present in the method, you must use the then () 
or exec () method afterward, otherwise the update is not done. 


Let’s modify the address of Clinton, which will now be New York: 


Using updateOne() to modify the address of “Clinton” (test.js file) 


var mongoose = require ("mongoose"); 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ({ 
lastname : String, 
firstname : String, 


address : String 


p); 


// creation of the Client class associated with the clients 
I collection 
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var Client = mongoose.model ("clients", clientSchema) ; 
Client.updateOne({ lastname : "Clinton" }, { address : "New 
York" }, function(err, response) { 

console.log("response =", response) ; 
}); 


Here, we use the callback function to display the content of the response parameter 
returned by the function. We get the following result: 


©] Terminal - node test.js 


Figure 8.10 - Updating a document 


Note 


The response .modifiedCount field indicates the number of 
modified documents. 


If you do not want to perform any processing at the end of the update, you can omit 
the callback function, but in this case, you must use the then () or exec () method 
afterward, otherwise, the update will not take place. 


Let’s use the exec () method to perform the update: 


Performing update using exec() method (test.js file) 
var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ( { 


lastname : String, 
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firstname : String, 


address : String 


hy) 


// creation of the Client class associated with the clients 
// collection 


var Client = mongoose.model ("clients", clientSchema) ; 


Client.updateOne({ lastname : "Clinton" }, 
{ address : "New York" }) 
-exec(); // exec() mandatory! 


Once you know how to create, search for, and then modify documents, you just have to 
know how to delete them. Let’s look at how to do it. 


Deleting documents in MongoDB 


Similar to updateOne () and updateMany (), there are the two class methods, 
namely deleteOne (conditions, callback) and deleteMany (conditions, 
callback) that allow you to delete the first document (delet eOne () ) or all the 
documents (delet eMany () ) that satisfy the conditions expressed. 


In addition, the instance method doc . remove (callback) also makes it possible to 
delete the doc document when it is in memory. 


Let’s remove Clinton from the collection by using the deleteOne () method, then 
display the new contents of the collection: 


Using deleteOne() to delete client “Clinton” (test.js file) 


var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var clientSchema = mongoose. Schema ({ 
lastname : String, 
firstname : String, 


address : String 
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p; 


// creation of the Client class associated with the clients 


I Collection 
var Client = mongoose .model ("clients", clientSchema) ; 


Client.deleteOne({ lastname : "Clinton" }, function (err, 
response) { 
console.log("After Clinton's removal"); 


console.log("response = ", response) ; 


Client.find(function(err, clients) { 
console.log("clients = ", clients); 
P: 
}); 


In the same way as for the updateOne () and updateMany () methods, it is the 


presence of the callback function that triggers the update of the database. If you do not 


indicate a callback function, you must in this case use the then () or exec () method 


following the deleteOne () or deleteMany () method. 


The result is displayed in the following figure: 


©] Terminal - node test.js 


Figure 8.11 - Deleting the “Clinton” client with deleteOne() 
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The response object returned in the callback of the delet eOne () 
(or deleteMany () ) method indicates the deletedCount field, which contains the 
number of documents deleted. 


We have successively studied the four possible operations on documents in a MongoDB 
database, namely inserting, searching, modifying, and deleting documents. And with this, 
we come to the end of this chapter. 


Summary 


Data management with MongoDB is relatively easy, thanks to the use of external modules 
such as mongoose. All possible actions on a database are easily achievable. 


The mongo utility, available when installing MongoDB, makes it easy to view collections 
and the documents they contain. 


Using the MongoDB database is essential for building client-server applications and 
maintaining user information. 


All that’s left is to see how to interconnect a client side made with Vue.js and a server 
side made with Node.js. We will see this in the following chapter. We will build a 100% 
JavaScript application in order to show how simple and efficient it is. 
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Integrating Vue.js 
with Node.js 


In this chapter, we will learn how to integrate a Vue.js application into a Node.js server, 
using Express to structure the server code (according to the MVC model) and MongoDB 
to store the information. 


For this, we will use the example of the list management application built in Chapter 5, 
Managing a List with Vue.js. But here, the server used will be a Node.js server, and the list 
items will be stored in the MongoDB database. This will allow them to be redisplayed later, 
if necessary. 


In the end, we will obtain a client-server application entirely made in JavaScript (both on 
the client side and on the server side). 


Here are the topics covered in this chapter: 
e Displaying application screens 
e Building the app with Express 
e MongoDB database structure 
e Installing the Axios library 


e Inserting a new element in the list 
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e Displaying list elements 
e Modifying an element in the list 


e Removing an element from the list 


The application uses the same screens as those already used in Chapter 5, Managing a List 
with Vue.js. We repeat them below to make them easier for you to understand. 


Technical requirements 


You can find the code files for this chapter on GitHub at: https: //github.com/ 
Packt Publishing/JavaScript -from-Frontend-to-Backend/blob/main/ 
Chapter%209.zip. 


Displaying application screens 

Here, we visualize the screens of the application, allowing the following: 
e Displaying the already existing list (empty at first) 
e Inserting a new element at the end of the list 
e Modifying an element of the list 


e Removing an item from the list 


Note 


The URL to access the list is http://localhost : 3000. The server used 
here is a Node.js server running with the Express module. The database used is 
MongoDB. 
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Initially, the list is empty. Only the Add Element button is present on the page (see the 
following figure): 


[File Edit View History Bookmarks Tools Help 


localhost/javascript/ xX | + 


= C QO D = bcalhost/avascript/ YW» = 


| Add Element | 


Figure 9.1 - Empty item list 


Clicking the Add Element button multiple times creates multiple rows with the text 


Element X followed by Remove and Modify buttons (here, we clicked on the Add 
Element button three times): 


(File Edit View History Bookmarks Tools Help 


- oF x 
localhost/javascript/ x | + 

S C QO D = localhostjavascript/ YY» = 
| Add Element | 


è Element 1 | Remove | | Modify | 


è Element 2 | Remove | | Modify | 


* Element 3 [Remove | { Modify | 


Figure 9.2 - Adding three items to the list 
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Next, lets modify the second element. An input field appears in place of the item text. Let's 
type New Element 2 in place of the text displayed in the input field: 


(File Edit View History Bookmarks Tools Help 


a [E] x 
localhost/javascript/ x + 
LT C QO D = localhostjavascript/ Y X = 
(add erent] 


è Element 1 | Remove | | Modify | 


[Enz (Feme) (Noy 


* Element 3 | Modify | 


Figure 9.3 - Editing the second item in the list 


By clicking outside the input field, the input field disappears, and the text of the element 
appears modified: 


(File Edit View History Bookmarks Tools Help 


iad Oo x 
localhost/javascript/ xX | + 
€ C QO D = localhostjavascript/ Y X = 
C 


è Element 1 | Remove | | Modify | 


e New Element 2 | Remove | | Modify | 


e Element 3 | Remove | | Modify | 


Figure 9.4 - Second list item changed 
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Finally, lets remove the first and third items from the list: 


[File Edit View History Bookmarks Tools Help 


= Oo x 
localhost/javascript/ x + 
= CG Ọ D = bocalhostjavascript/ YF X = 
‘Add Element | 


e New Element 2 | Remove | | Modify 


Figure 9.5 — First and third list items removed 


Now, when we refresh the previous window, we see that the list is re-displayed with New 
Element 2, thus indicating that the modifications made are indeed stored in a database. 
This was not the case when we made this application in Chapter 5, Managing a List with 
Vue.js, with only Vue.js, because the elements of the list were not saved in a database: 


[File Edit View History Bookmarks Tools Help 


- oF X 
localhost/javascript/ x | + 

S C OD = bocalhost/javascripty Y X = 
Add Element | 


e New Element 2 | Remove | | Modify 


Figure 9.6 — New list display: the list is preserved 


To create this application, we will, of course, use the Vue.js program that we have already 
written in Chapter 5, Managing a List with Vue.js. But it will have to be modified so that 
this application works on a Node.js server with the Express module and that the data 
displayed is stored in the MongoDB database. 
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We'll indicate here the files of the <GlobalApp> and <Element > components, written 
previously, in Chapter 5, Managing a List with Vue.js, to explain the modifications that will 
be made to them hereafter. 


Here's the <GlobalApp> component: 


<GlobalApp> component (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 


elements : [] 


} 
Jo 
components : { 
Element :Element 
Jo 
template 
<button @click="add()">Add Element</button> 
<ul> 
<Element v-for="(element, index) in elements" 
:key="index" 
:text="element" :index="index" 
@remove="remove (Sevent)" @modify="modify (Sevent) " 
/> 
</ul> 


, 


methods : { 
add() { 
var element = "Element " + (this.elements.length + 1); 
this.elements.push(element) ; 
Py 
remove (params) { 
var index = params.index; 


this.elements.splice(index, 1); 
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We 

modify(params) { 
var index = params.index; 
var value = params.value; 


this.elements [index] = value; 


export default GlobalApp; 


Here's the <Element > component: 


<Element> component (element.js file) 


const Element = { 
data() { 
return { 
input : false 
} 
ĵo 
template 
allaa 
<span v-if="!input"> {{text}} </span> 
<input v-else type="text" :value="text" 
@blur="modify (Sevent)" ref="refInput" /> 
<button @click="remove()"> Remove </button> 
<button @click="input=true"> Modify </button> 


</li> 
Moos s |iMicexael, Valier” | , 
methods : { 

remove () { 


// process the click on the Remove button 
this.Semit ("remove", { index : this.index }); 


}, 
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modify(event) { 
var value = event.target.value; 
this.input = false; 
this.Semit ("modify", { index : this.index, value 
value }); 
} 
Jo 
emits : ["remove", "modify"], 
updated() { 
// check that refInput exists, and if so, give focus to 
ff Was tapue szEaySule! 
TSE (WAS, rera, PSTL) leah), SASHES), POTTAN TOCNE) 6 


export default Element; 


The index.html file that allows you to include the <GlobalApp> component is 
the following: 


index.html file 


<html> 
<head> 
<meta charset="utf-8" /> 
<script srce="https://unpkg.com/vue@next"></script> 


<style type="text/css"> 
li { 
margin-top:10px; 
} 
ul button { 
margin-left:10px; 
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} 
</style> 
</head> 
<body> 
<div id="app"></div> 
</body> 
<script type="module"> 


import GlobalApp from "./global-app.js"; 


var app = Vue.createApp ({ 


components : { 
GlobalApp:GlobalApp 

Ne 

template : "<GlobalApp />" 


DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


To create this application, we start by creating the Node.js application, which will host 

the JavaScript code written with Vue.js. To do this, the application is created using the 

express command. The application will be named list (for example), so we will have 
to type the express list command to create this application, as is explained in the 
following section. 
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Building the app with Express 


Let’s start by creating the application with Express. To do this, type the express list 
command, which creates the application named list. This application will be accessible using 
the URL http://localhost : 3000, as seen in Chapter 7, Using Express with Node.js. 


Let’s type the express list command in the current directory: 


fcn] npm start 


Figure 9.7 - Creating the application list with Express 
The server is started by typing the indicated commands, namely: cd list, npm 
install, followed by npm start. 
The application is started by typing the URL http://localhost : 3000 in the browser. 
We display the basic application created as standard by Express (see Figure 9.8). 


If an error occurs while loading the Express modules, you can type the npm link 
express command in order to locate the Express module within the application. And 
if an error occurs while loading the mongoose module, you can type the npm link 
mongoose command. 
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If all is okay, you obtain the following: 


(File Edit View History Bookmarks Tools Help = Oo x 
@ Express x a 
c Œ O D localhost:3000 wv» = 
Express 
Welcome to Express 


Figure 9.8 - Standard application created with Express 


The goal now is to visualize our list management application, created with Vue.js. It 
consists of three files: 


e The index.html file, which is the file to view at startup 


e The global-app.js file, which describes the main <GlobalApp> component of 
the application 


e The element .js file, which describes the <Element > component corresponding 
to a displayed element line 


The main directory of the Express application (the 1ist directory) includes a public 
subdirectory containing the images, javascripts, and stylesheets subdirectories. 


Let’s drop the three files index.html, global-app.js, and element .js in the 
public directory, directly under the root. 


274 Integrating Vue.js with Node.js 


Note 

Modifying files in the public directory does not require a server restart. On 
the other hand, modifying the app . js file of the Express application requires 
restarting the server with nom start. 


Let’s view the URL http://localhost : 3000 again in the browser. The Vue.js 
application we built in Chapter 5, Managing a List with Vue.js, will now appear. Button 
clicks will also start working. 


The only difference is that our Vue.js application runs on a Node.js server instead of 
running on another application server like in Chapter 5, Managing a List with Vue.js. 


(File Edit View History Bookmarks Tools Help = E x 
localhost:3000/ x + 
c Œ O D localhost:3000 v7 » = 
Add Element 


èe Element 1 | Remove | | Modify 


e Element 2 | Remove | | Modify 


è Element 3 | Remove | | Modify 


Figure 9.9 - Application running on a Node.js server 


However, if the page displayed is refreshed, the list previously displayed is deleted because 
there is currently no persistence of the information displayed in the database. 


We will now see how our application can interact with the Node.js server and the 
MongoDB database. 


MongoDB database structure 


To build our application, we will have to perform data reads and updates on the server in 
the database. For example, each click on the Add Element button should insert a new line 
into the displayed HTML page but should also insert a new document into MongoDB's 
elements collection. Indeed, each document of the elements collection will represent 
the text of the element displayed in the list on the screen. 
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Note 


To access the MongoDB database, you start by installing the mongoose 
module (see the previous chapter), which allows you to manipulate database 
documents in JavaScript. 


To do this, type the npm install mongoose command (from the main 
directory, List, of the Express application). 


The elements collection will be the one that will store the list items in MongoDB. 

A document in the elements collection will consist of its text associated with the text 
property. Each document will also have the _id property, whose unique value is assigned 
by MongoDB for each document inserted into the collection. 


Note 


The structure of the database is described using the List Schema schema, 
which will be associated with the List model used to create the documents of 
the elements collection. 


Express’s app . j s file is modified to include these definitions: 


Adding List model to use MongoDB’s elements collection (app.js file) 


var createError = require('http-errors') ; 
var express = require('express') ; 

var path = require('path') ; 

var cookieParser = require('cookie-parser') ; 


var logger = require('morgan') ; 


var indexRouter = require('./routes/index') ; 


var usersRouter = require('./routes/users') ; 


var mongoose = require("mongoose") ; 

mongoose.connect ("mongodb://localhost/mydb test"); // we 
// connect 
// to 
// mydb test 


var listSchema = mongoose. Schema ({ 
text : String // text associated with the list item 
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}); 


// association of the List model with the elements collection 


var List = mongoose.model("elements", listSchema) ; 
var app = express(); 


// view engine setup 
app asec (Uviewsi, path: join i idirname, views DN; 


app.set('view engine', 'jade'); 


app.use (logger ('dev')); 
app.use(express.json()) ; 


( 
( 
app.use (express.urlencoded({ extended: false })); 
app.use(cookieParser()) ; 

( 


appruse (express state (pate he Jonni iidirnane, pulse) a) 


app.use('/', indexRouter) ; 


app.use('/users!', usersRouter) ; 


// catch 404 and forward to error handler 
app.use(function(req, res, next) { 


next (createError (404) ); 


p); 


// error handler 
app.use(function(err, req, res, next) { 
// set locals, only providing error in development 


res.locals.message = err.message; 


res.locals.error = req.app.get('env') === 'development' ? 


err : {}; 


// vender the error page 
res.status(err.status || 500); 


res render (( Vererctone” )) 9 
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pD; 


module.exports = app; 


The app. js file will then be enriched to define the new routes that will update the 
database. These routes will be created by using the app. use () method (as explained in 
Chapter 7, Using Express with Node.js). The creation of these routes will be described in 
the following sections. 


Note 


Thanks to the List model that we have created, we will have access to the 
methods List .create(), List .f£ind(),andso on for manipulating 
documents in the elements collection of the MongoDB database. 


To create interactions between the client (here, the browser) and the server (here, the 
Node.js server) in order to update the database containing the list of elements, we use the 
Axios JavaScript library here. 


Installing the Axios library 


We see that, for now, we can manipulate the list items displayed on the HTML page, but 
we cannot yet update them in the database on the server. 


For this, the Vue.js program must be able to communicate with the Node.js server. This is 
possible using a JavaScript library such as Axios (see https: //github.com/axios/ 
axios). All you have to do is include the library in the HTML page (here, it will be in the 
index.html file) in order to be able to use its features. 


Note 


The Axios library is a library allowing communication between a browser and 
a server using Ajax technology. This technology allows a browser and a server 
to exchange information while remaining on the same HTML page, which is 
what we want here. This is called a single-page application (SPA) (when the 
application consists of a single HTML page). 


Let’s include the Axios library in the index.html file (using the <script> tag), and 
display the value of the axios . VERSION variable, which contains the version number 
of the library. This verifies that the Axios library is accessible: 
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Including Axios library and displaying version number (index.html file) 


<html> 
<head> 
<meta charset="utf-8" /> 
<script src="https://unpkg.com/vue@next"></script> 
<script src="https://unpkg.com/axios/dist/ 


axios.min.js"></script> 


<style type="text/css"> 
li { 
margin-top:10px; 
} 
wil ionic i 
margin-left:10px; 
} 
</style> 
</head> 


<body> 
<div id="app"></div> 
</body> 


<script type="module"> 


console.log("axios.VERSION = " + axios.VERSION) ; 
// display Axios version number 


import GlobalApp from "./global-app.js"; 


var app = Vue .createApp ( { 
components : { 
GlobalApp:GlobalApp 


Ja 


template : "<GlobalApp />" 
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DE 
var vm = app.mount ("div#app") ; 
</script> 


</html> 


We simply added in the index.html file the Axios library (using the <script> tag) 
and the instruction to display the version number of the Axios library in the console, 
which allows us to check that the Axios library is accessible afterward. 


Let’s display the page again in the browser (with the URL http://localhost :3000). 


We get a message in the console indicating the version number of Axios used (see the 
following figure), thus showing that we have access to the functionalities of the 
Axios library: 


(File Edit View History Bookmarks Tools Help = o x 
localhost:3000/ x = 
O © Q D localhost:300í Ww» = 
Add Element | 
Ce © Inspector Console © Debugger >> GJ] «- X 
Ü | Y Fiter output xe 
Errors Warnings Logs Info(1) Debug CSS XHR Requests 
axios.VERSION = @.26.1 localhost: 3008: 23:13 


Figure 9.10 - Displaying the Axios version number 


Now let’s see how to use Axios to interact with the server and update the 
database documents. 


The goal is, of course, to make maximum use of the Vue.js code that we have already 
written by modifying it to use the Axios library and thus perform communication with 
the Node.js server. 
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Subsequently, we will therefore modify the following files (in addition to the index. 
html file previously modified to include the Axios library): 

e The global-app.4js file, to make calls to the Axios library 

e The element .js file, to adapt it to the structure of the database 

e The app. js file (created by Express), to perform database queries 


We have seen how to install and use Axios in our program. Now let’s see how to use it to 
insert an element into the database. 


Inserting a new element in the list 


Let’s see how to store a new element in the list, following a click on the Add Element button. 


The text associated with this element must be transmitted to the server, which will be 
of the form Element X. We will see later how to modify this text after clicking on the 
Modify button. 


The add() method defined in the <GlobalApp> component is used to insert a new 
element into the displayed list. It will be necessary to add instructions that use the Axios 
library in order to also insert this new element in the MongoDB elements collection. 


Before starting to use Axios, it is useful to slightly modify the JavaScript program written 
with Vue.js. To do this, we will use a new attribute when creating the <Element > 
component, replacing the text and index attributes with the element attribute. 


Replacing the text and index attributes with the 
element attribute 


When creating an element, we currently use the element’s text and index, which are then 
used in the <Element > component, to display it (with its text) or to modify or delete 
it (with its index). 


The use of the index to identify the element in the list displayed on the screen was relevant 
before, but this is no longer the case if we want to modify or delete the element in the 
database. This is because the documents of a MongoDB collection are not identified by 
their index but rather by their identifier id. 
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Rather than passing the text and index parameters in the <Element > component, 
we simplify by passing only the element parameter, whichisa{ text, _id } 
object. The element . text field allows you to retrieve the text to be displayed, while the 
element ._id field allows you to access the unique identifier of the element (such as the 
index, which was unique for each element). 


We modify the global-app.js and element. js files to take this into account. 


These files are modified below but will be modified again to take into account the 
connection with the database: 


global-app.js file 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 
elements : [] // array of object { text, id } 
// (_id = document id in MongoDB) 


} 
e 
components : { 
Element :Element 
}, 
template 


<button @click="add()"sAdd Element</buttons 
Ul 
<Element v-for="(element, index) in elements" 
:key="index" :element="element" 
@remove="remove (Sevent)" @modify="modify ($event) " 
/> 
</ul> 


1 


methods : { 
add() { 
var text = "Element " + (this.elements.length + 1); 
this.elements.push({text:text, 
_id:this.elements.length}) ; 
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// to modify to retrieve the real 
// _id provided by MongoDB 
Jo 
remove (params) { 
var id = params.id; 
// remove the element with this id from the elements 
// array 
this.elements = this.elements. filter ( 
function(element) { 


if (element. id == id) return false; 
else return true; 
}); 


Jo 
modify (params) { 
var id = params.id; 
var value = params.value; 
// modify the text of the element with this id in the 
// elements array 
this.elements = this.elements.map(function(element) { 
if (element. id == id) { 
element.text = value; 
return element; 
} 


else return element; 


Ð: 


export default GlobalApp; 
The following remarks can be made about the preceding code: 


e ‘The reactive elements variable now becomes an array of { text, _id } 
objects. To do this, we write in the add() method the instruction this. 
elements.push({text:text, _id:this.elements.length}) 
by inserting an object of the form {text, _id} into the elements array. 
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The value of the _id property is temporary here: in fact, you must then retrieve 
the identifier provided by MongoDB when the document has been saved in 
the database. 


Each <Element > component is constructed (in the template) by passing it an 
element attribute that representsa { text, _id } object. 


The remove () method must remove from the list the element having the passed 
identifier. To do this, we use the JavaScript filter () method to keep all the 
elements except the one with this identifier. 


Similarly, the modify () method must modify the value of the element of the list 
having this identifier. We use the JavaScript map () method to return a new array of 
elements, for which the element with this identifier has its value modified. 


The element . js file becomes the following: 


element.js file 


const Element = { 


data() { 
return { 
input : false 
} 
te 
template 
<li> 
<span v-if="!input"> {{element.text}} </span> 
<input v-else type="text" :value="element.text" 
@blur="modify (S$event) " 
ref="refInput" /> 
<button @click="remove()"> Remove </button> 
<button @click="input=true"> Modify </button> 
</li> 


props : ["element"], 
methods : { 
remove() { 
// process the click on the Remove button 


this.$emit("remove", { id : this.element. id }); 
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Jo 
modify (event) { 
var value = event.target .value; 
this.input = false; 
this.$emit("modify", { id : this.element. id, value : 
value }); 


} 
E 
emits : ["remove", "modify"], 
updated () { 


// check that refInput exists, and if so, give focus to 
// the input field 
if (this.$refs.refInput) this.S$refs.refInput.focus(); 


export default Element; 


As the attribute transmitted for the creation of the <Element > component is named 
element and corresponds to an object { text, _id },weuseelement.text 
and element. id to display the text and use the identifier of the element (instead of 
the index). 


You can check that the program still works, even if the connection with the server for 
insertion into the database has not yet been made. 


Note 


We have modified the code of the Vue.js program in order to adapt it to the use 
of the MongoDB database. 


Let’s now explain how the Axios library will allow the client and the server to 
communicate with each other, in order to update the MongoDB database. 
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Description of the Axios library for communicating 
between the client and the server 
Now let’s use Axios to insert the element into the database. 


Axios offers four main methods for communicating between the browser and the server, 
with the JavaScript language. The server we are using here is a Node.js server, but Axios 
allows you to interact with any type of server. The four methods are those related to the 
types of HTTP requests one can make: GET, POST, PUT, and DELETE: 


e axios.get (url, options): This allows you to perform a GET type request. 
e axios.post (url, options): This allows you to perform a POST type request. 
e axios.put (url, options): This allows you to perform a PUT type request. 


e axios.delete(url, options): This allows you to perform a DELETE 
type request. 


The options parameter allows you to specify additional parameters that will allow 
the server to perform its processing. For example, in the case of our application, we will 
indicate in this parameter the text of the list element that we want to store in the database. 


Note 


All these methods return a Promise object, which then allows 

you to continue with the then (callback) method. The 
callback (response) function is used to retrieve and analyze the 
server's response following the request being made. 


Promise objects were studied at the end of Chapter 2, Exploring the 
Advanced Concepts of JavaScript. 


In each case, we will have to process the Axios request sent on the client side (in the 
global-app.js file associated with the <GlobalApp> component), then take it 
into account on the server side (in the app . j s file, which receives the queries issued 
by Axios). 


Now let’s see how the POST request will allow us to insert elements into the database. 
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Using Axios with a POST type request (client side) 


Now let’s see how to use the axios.post () method to insert a new element into the 
elements collection, following the creation of a new element in the list. 


Note 


We are using the POST request here to insert the item, but other types of 
requests would work the same. However, using the POST request makes 
sense here because it follows the official recommendations for using 
REpresentational State Transfer (REST) requests. 


Although only a few lines are added to each file, the full code is shown below each time, 
so you can see where the changes are located: 


Adding a new element in the database, client side (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 
elements s U // array of object { text, id } 
// (_id = document id in MongoDB) 


} 
}, 
components : { 
Element : Element 
Ja 
template j 


<button @click="add()">Add Element</button> 


<ul> 
<Element v-for="(element, index) in elements" 
:key="index" :element="element" 
@remove="remove (Sevent)" @modify="modify (Sevent) " 
/> 
</ul> 


, 


methods : { 
add() { 
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var text = "Element " + (this.elements.length + 1); 
axios.post("/list", {text:text}) // pass object 
// {text:text} to 


// server 
.then((response) => { 


this.elements.push({text:text, 
_id:response.data.id}); 
}); 
}, 
remove (params) { 
var id = params.id; 
// remove the element with this id from the elements 
// array 
this.elements = this.elements. filter ( 
function(element) { 
aig, (elenenet. 1C == 16) iene, talsez 
ellsefreturnitnuer 
); 
}, 
modify(params) { 
var id = params.id; 
var value = params.value; 
// modify the text of the element with this id in the 
// elements array 
this.elements = this.elements.map(function(element) { 
if (element. id == id) { 
element.text = value; 
return element; 


} 


else return element; 


DE 


export default GlobalApp; 
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The axios.post("/list", {text:text}) method activates the /list URL on 
the server, using a POST type request. The text parameter is passed to the server so that 
it stores it in the elements collection. 


In return for the call to the server, the latter returns a response object containing in 
data. id the identifier of the document created in MongoDB. This identifier and the 
element text are then stored in the elements array. Because the elements array is 

a reactive variable of Vue.js, its update causes the list to be re-displayed in the browser. 


Note 


Notice how the callback function is written in the then (callback) 
method. We use the form with => (that is without using the function 
keyword) in order to preserve the value of this in the callback function. If 
you use the function keyword instead, the value of this is undefined 
and you can no longer access the elements variable through this. 
elements, which will cause an error. 


The POST request was issued by the client (the browser), so it must now be processed by 
the server to insert a new element into the collection. Lets study how to proceed. 


POST type request processing (server side) 


Now let’s see how the server handles the receipt of the POST request. It must create 
a new document in the elements collection of the database. The server’s app. js file is 
modified to take into account the POST request on the /list URL: 


Adding a new element in the database, server side (app.js file) 


var createError = require('http-errors') ; 
var express = require('express') ; 

var path = require('path') ; 

var cookieParser = require('cookie-parser') ; 


var logger = require('morgan') ; 


var indexRouter = require('./routes/index') ; 


var usersRouter = require('./routes/users') ; 


var mongoose = require("mongoose") ; 
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mongoose.connect ("mongodb://localhost/mydb test") ; 


var listSchema = mongoose. Schema ({ 


CEE g GEE) 


DE 
var List = mongoose.model("elements", listSchema) ; 
var app = express(); 


// view engine setup 
app.set('views', path.join(_ dirname, 'views'))j; 


app.set('view engine', 'jade'); 


app.use (logger ('dev')) ; 

app.use(express.json()) ; 

app.use (express.urlencoded({ extended: false })); 
app.use(cookieParser()) ; 

app.use\(express. static (path. join( dirname, ‘pubilie') ) i; 


app.use('/', indexRouter) ; 


app.use('/users', usersRouter) ; 


// creating a new element in the list 
app-post("/list", function(req, res) { 
var text = req.body.text; 
List.create({text:text}, function(err, doc) { 
res.json({id:doc. id}); // send the MongoDB identifier 
// in the response 
}); 
}); 


// catch 404 and forward to error handler 
app.use(function(req, res, next) { 


next (createError (404) ); 
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}); 


// error handler 

app.use(function(err, req, res, next) { 
// set locals, only providing error in development 
res.locals.message = err.message; 


res.locals.error = req.app.get('env') === 'development' ? 


Il 


err : {}; 


// vender the error page 
res.status(err.status || 500); 


res.render('error') ; 


}); 


module.exports = app; 


The app.post ("/list", callback) method is used to receive and process the 
request to insert the new element into the elements collection. 


The text sent in the Axios text parameter is received on the server in the req. body. 
text variable. The update of the elements collection is performed by the List. 
create () class method, to which we pass the text parameter. In the callback function 
associated with the create () method, we retrieve the identifier of the document created 
indoc. id. 


We return this identifier in the response sent to the browser as a JSON object { id 

doc. id }. We use the res.json() method for this. This server return is processed 
in the then (callback) method when calling the axios.post () method previously 
seen (the global-app. js file). 


If you run the preceding program, you'll see that the lines containing Element X are 
inserted one under the other on the page. But nothing says that the database has been 
updated. Let's verify the correct insertion using the tools available in MongoDB. 
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Verifying the correct operation of the insertion in 
the database 


To verify the insertion in the database, just use the mongo utility, then type the 
command db.elements.find() to see the inserted documents displayed (assuming 
we have already connected the mydb_test database with the db=connect ("mydb_ 
test") command). 


Assuming that three list items have been inserted, we get the following: 


‘es.| Terminal - mongo 


Figure 9.11 - Using the mongo utility to view the contents of the elements collection 


The next step is to retrieve the information stored in the database to display the items 
in the list. The list should be viewed when the page is displayed at the start and will be 
updated as insertions, modifications, or deletions are made. 
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Displaying list elements 


In this section, we deal with the first display of the page. Insertion has been seen 
previously, and modification and deletion are covered in the following sections. 


Note 


To display the list when the application starts, you must use the created () 
method or the mounted () method of the component, which are called in 
each Vue.js component when the component is created. 


To retrieve the list of elements, we are going to use an HTTP GET request. 


Using Axios with a GET type request (client side) 


Here, we are going to make a GET type request with the /1ist URL to the server. The 
axios.get("/list") instruction is used to perform this request. We can use this 
instruction in the created () or mounted() method. Here, we choose to use it in the 
created () method 


Retrieving list of items, client side (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 
elements s [] // array of object { text, _id } 
// (_id = document id in MongoDB) 


} 


components : { 
Element : Element 
template 


<button @click="add()">Add Element</button> 
atls 
<Element v-for=" (element, index) in elements" 
:key="index" :element="element" 
@remove="remove ($event)" @modify="modify (Sevent) " 


f= 
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</ul> 


fi 


methods : { 
add() { 
var text = "Element " + (this.elements.length + 1); 
axios.post("/list", {text:text}) 
.then((response) => { 
console.log(this.elements) ; 
this.elements.push({text:text, 
_id:response.data.id}) ; 
p; 
}, 
remove (params) { 
var id = params. id; 
// remove the element with this id from the elements 
// array 
this.elements = this.elements.filter( 
function(element) { 
aie element atch = altel) return ralsen 
ellselreturn true; 
h); 
Ihe 
modify(params) { 
var id = params.id; 
var value = params.value; 
// modify the text of the element with this id in the 
// elements array 
this.elements = this.elements.map(function(element) { 
if (element. 1d == id) { 
element. text = value; 
return element; 
} 


else return element; 


p; 
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created() { 

axios.get("/list") 

.then ( (response) => { 
this.elements = response.data.elements.map ( 

function(element) { 
return { id : element. id, text : element.text } 

}); 

}); 


export default GlobalApp; 


The axios.get ("/list") method makes the request to the server, then processes the 
response received in the then (callback) method. As before, the received response 
object contains the data property, which contains the response returned by the server 
(the elements field - see below). 


As the server sends all the document fields of the elements collection, we filter the list 
received by the map () method in order to keep only the _id and text fields (we thus 
remove the __v field associated with the version number, which is unnecessary here). 


Now let’s see how to process the GET request on the Node.js server side. 


GET type request processing (server side) 


The GET /list request is received by the Node.js server through the 

app.get ("/list") method defined in the app. js file. The processing will consist 
of reading the content of the elements collection and returning it in JSON form to the 
browser in the elements property. Each item in the returned collection has _id, text, 
and __v (for the version number of the document) fields: 


Retrieving list of items, server side (app.js file) 


var createError = require('http-errors') ; 
var express = require('express') ; 

var path = require ('path'); 

var cookieParser = require('cookie-parser') ; 


var logger = require('morgan') ; 
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var indexRouter = require('./routes/index') ; 
var usersRouter = require('./routes/users') ; 
var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var listSchema = mongoose. Schema ( { 
text : String 


DE 
var List = mongoose .model ("elements", listSchema) ; 
var app = express (); 


// view engine setup 
app- set (Uviewsi, patchigorin(iidirname, viewsih; 


app.set('view engine', 'jade'); 


app.use (logger ('dev')); 
app.use(express.json()) ; 
app.use (express.urlencoded({ extended: false })); 
app.use(cookieParser () ) ; 


app.use(express.static(path.join( dirname, 'public')))j; 


app.use('/', indexRouter) ; 


app.use('/users', usersRouter) ; 


// creating a new element in the list 
app.post("/list", function(regq, res) { 

var text = req.body.text; 

console.log(text) ; 

List.create({text:text}, function(err, doc) { 

res.json({id:doc._id}); 

DF 

p; 
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// retrieving list of elements 
app.get("/list", function(req, res) { 
List.find(function(err, elements) { 
res.json({elements:elements}) ; 


// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
next (createError (404) ); 


}); 


// error handler 

app.use(function(err, req, res, next) { 
// set locals, only providing error in development 
res.locals.message = err.message; 
res.locals.error = req.app.get('env') === 'development'! ? 


err : {}; 


// vender the error page 
res.status(err.status || 500); 


res. ronder lerror!),; 


D 


module.exports = app; 


The elements collection is read using the List .find () class method. We return the 
{ elements : elements } object in response to the browser, the use of which 
we saw earlier. 
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The list of items is now displayed each time the application is started. Just restart 
the server with npm start, then re-display the URL of the page, http: // 
localhost : 3000. 


File Edit View History Bookmarks Tools Help E o x 
localhost:3000/ x — 
= CG QO DBD localhost:3000 — > = 
Add Element 


èe Element 1 | Remove | | Modify 


è Element 2 | Remove Modify 


e Element 3 | Remove | | Modify 


Figure 9.12 - The list of elements is displayed when the application starts 


We have seen how to insert an element and retrieve the list of elements. Next, let’s see how 
to modify an element in the list. 


Modifying an element in the list 


Here we show how to modify an element of the list, keeping this modification in the 
database. A PUT type request will be used for this. 


Using Axios with a PUT type request (client side) 


The axios.put("/list", options) method is used to perform a PUT type request 
to the server. We transmit to the server in the opt ions parameter the new text of the 
modified element and its identifier in the database. The identifier and the new text will 
allow the item to be updated on the server: 


Modifying an element, client side (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
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data() { 
return { 
elements : [] // array of object { text, id } 
// (_id = document id in MongoDB) 
} 
E 
components : { 


Element :Element 

h, 

template 
<button @click="add()"sAdd Element</buttons 
<ul> 


<Element v-for=" (element, index) in elements" 


:key="index" :element="element" 


@remove="remove ($event)" @modify="modify (Sevent) " 
Ve 
</ul> 


` 
, 


methods : { 
add() { 
var text = "Element " + (this.elements.length + 1); 


axios.post("/list", {text:text}) 


.then((response) => { 
console.log(this.elements) ; 
this.elements.push({text:text, 
_id:response.data.id}) ; 

DE 

a 
remove (params) { 

var id = params.id; 

// remove the element with this id from the elements 

// array 

this. elements = this.elements.filter( 

function (element) { 
i£ (element. id -= id) return false; 


else return true; 
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p; 
}, 
modify(params) { 
var id = params.id; 
var value = params.value; 
// modify the text of the element with this id in the 
// elements array 
this.elements = this.elements.map(function(element) { 
iz (elenwsae. icl == sil) {| 
element .text = value; 
return element; 
} 
else return element; 
p; 
// modify the text of the element having this 
// identifier 
axios.put("/list", {text:value, id:id}); 
} 
E 
created() { 
axios.get ("/list") 
.then((response) => { 
this.elements = response.data.elements.map ( 
function(element) { 


return { id : element. id, text : element.text } 


export default GlobalApp; 


The then (callback) method should not be used here because the server does not 
return any information for the browser. 


Let’s now see the management of the PUT request on the server side. 
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PUT type request processing (Server side) 


The server processes the PUT /list request in the app. j s file. The processing consists 
of carrying out an update of the document of the collection having this identifier, with the 
text received from the browser: 


Modifying an element, server side (app.js file) 


var createError = require('http-errors') ; 
var express = require('express'); 

var path = require('path') ; 

var cookieParser = require('cookie-parser') ; 


var logger = require('morgan') ; 


var indexRouter = require('./routes/index') ; 


var usersRouter = require('./routes/users') ; 


var mongoose = require ("mongoose"); 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var listSchema = mongoose. Schema ({ 


text § SErIng 


DE 

var List = mongoose.model("elements", listSchema) ; 
var app = express (); 

// view engine setup 

app.set('views!, pathijoin( dirname, 'views!)); 


app.set ('view engine', ‘jade'); 


app.use(logger('dev')) ; 
app.use(express.json()); 


( 
( 
app.use (express.urlencoded({ extended: false })); 
app.use(cookieParser()) ; 

( 


app.use(express.static(path.join(_ dirname, 'public')))j; 
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app.use('/', indexRouter) ; 


app.use('/users', usersRouter) ; 


// creating a new element in the list 
app.post("/list", function(req, res) { 

vari text — reg Dody text, 

console.log (text); 

List.create({text:text}, function(err, doc) { 

res.json({id:doc. id}); 

Whe 

DF 


// retrieving list of elements 
app.get("/list", function(req, res) { 
List.find(function(err, elements) { 
res.json({elements:elements}) ; 
DE 
Dr 


// modifying an element in the list 
app.put("/list", function (req, res) { 
var id = req.body.id; 
var text = req.body.text; 
List.updateOne({ id:id}, {text:text}).exec(); 
// don't forget exec()! 


res.send(); // close the connection to the browser 


}); 


// catch 404 and forward to error handler 
app.use(function(req, res, next) { 


next (createError (404) ); 


pD; 


// error handler 
app.use (function (err, req, res, next) { 


// set locals, only providing error in development 
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res.locals.message = err.message; 


res.locals.error = req.app.get('env') === 'development' ? 


ema a (7 


// vender the error page 
res.status(err.status || 500); 


resrrender Wer rori 


D: 


module.exports = app; 


The text and the identifier are retrieved from the server in the req. body. text and 
req. body. id variables. The document with this identifier is updated in the database 
with the new text. The List .updateOne () class method allows this document to be 
modified, but since it does not use a callback function afterward, the exec () method 
must be used afterward for the update to be carried out in the database. 


Also notice the res . send () instruction at the end of the processing. It closes the 
connection between the browser and the server. If the connection is not closed, the 
browser waits for the server’s response, which would never come if the server sends 
nothing back to the browser. 


Let's finish by explaining how to remove an item from the list. 


Removing an element from the list 


Finally, we will learn how to remove an element from the list. A DELETE type request will 
be used for this. 


Using Axios with a DELETE type request (client side) 


The axios.delete("/list", options) method is used to trigger a DELETE type 
request on the server. The options parameter must indicate the identifier of the element 
to be deleted from the collection. 


However, unlike the previous axios.get (), axios.put (),and axios.post () 
calls, the axios.delete("/list", options) call requires that the options 
parameter be written in the data property (thus written as { data : options }). 
If you don't follow this convention, it won't work. 
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Here are the instructions for performing a DELETE request with the Axios library: 


Deleting an element, client side (global-app.js file) 


import Element from "./element.js"; 
const GlobalApp = { 
data() { 
return { 
elements : [] // array of object { text, id } 
// (_id = document id in MongoDB) 


} 
Ie 
components : { 
Element :Element 
he 
template 
<button @click="add()">Add Element</button> 
<ul> 
<Element v-for="(element, index) in elements" 
:key="index" :element="element" 
@remove="remove (Sevent)" @modify="modify(Sevent)" 
/> 
</ul> 


1 


methods : { 
add() { 
var text = "Element " + (this.elements.length + 1); 
axios.post("/list", {text:text}) 
.then((response) => { 
console.log(this.elements) ; 
this.elements.push({text:text, 
_id:response.data.id}) ; 
DE 
Jo 
remove (params) { 
var id = params.id; 
// remove the element with this id from the elements 
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// array 
this.elements = this.elements.filter( 
function(element) { 

bE (lement 1C == 1E) recusa alae; 

else return true; 
DE 
axios.delete("/list", { data : {id:id} }); 

// the options must be written in the data 
// property 
by 
modify(params) { 

var id = params.id; 
var value = params.value; 
// modify the text of the element with this id in the 
// elements array 
this.elements = this.elements.map(function(element) { 

ace (elementa acl == al) | 

element text = value); 
return element; 

} 

else return element; 
}); 


axios.put("/list", {text:value, id:id}); 


// modify the text of the element having this 
// identifier 
} 
le 
created() { 
axios.get("/list") 
.then((response) => { 


this.elements = response.data.elements.map ( 
function(element) { 
return {_id s element. id, text : element.text } 
}); 
}); 
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export default GlobalApp; 


As mentioned before, we use the opt ions parameter of the axios.delete(/list", 
options) method in the form { data : options } so that the options are correctly 
passed by the DELETE method. 


Let’s now examine the processing performed by the server when receiving the 
DELETE request. 


DELETE type request processing (server side) 


The server receives the DELETE /list request using the app.delete("/list, 
callback) method. The callback function uses the identifier passed in the request to 
delete the corresponding document from the elements collection: 


Deleting an element, server side (app.js file) 


var createError = require('http-errors') ; 
var express = require('express') ; 

var path = require('path') ; 

var cookieParser = require('cookie-parser') ; 


var logger = require('morgan') ; 


var indexRouter = require('./routes/index') ; 
var usersRouter = require('./routes/users') ; 
var mongoose = require("mongoose") ; 


mongoose.connect ("mongodb://localhost/mydb test") ; 


var listSchema = mongoose. Schema ({ 


text : String 


p; 
var List = mongoose.model("elements", listSchema) ; 


var app = express(); 
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// view engine setup 
app.set('views!, path.join( dirname, '!views!')); 


app.set ('view engine', ‘jade'); 


app.use (logger ('dev')); 
app.use(express.json()); 


( 
( 
app.use (express.urlencoded({ extended: false })); 
app.use(cookieParser()) ; 

( 


app ..use\(express static (path= join (  darname, 'pulbilic!) )))r; 


app.use('/', indexRouter) ; 


app.use('/users!', usersRouter) ; 


// creating a new element in the list 

app.post("/list", function(req, res) { 
var text = req.body.text; 
console.log(text) ; 
List.create({text:text}, 

res.json({id:doc. id}); 

DE 

DE 


function(err, doc) { 


// retrieving list of elements 
app.get("/list", function(req, res) { 
List.find(function(err, elements) { 
res.json({elements:elements}) ; 
DE 
DE 


// modifying an element in the list 
app.put("/list", function(req, res) { 
var id = req.body.id; 
var text = reg: body text, 
List.updateOne({ id:id}, {text:text}).exec(); 
res.send(); // close the connection to the browser 
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p; 


// remove an element from the list 
app.delete("/list", function (req, res) { 
var id = req.body.id; 
console.log(req.body.id) ; 
List.deleteOne({ id:id}) .exec(); // don't forget exec()! 
res.send(); // close the connection to the browser 


}); 


// catch 404 and forward to error handler 
app.use(function(req, res, next) { 


next (createError (404) ); 


p; 


// error handler 
app.use (function (err, req, res, next) { 


// set locals, only providing error in development 


res.locals.message = err.message; 
res.locals.error = req.app.get('env') === 'development' ? 
sree a hp 


// render the error page 
res.status(err.status || 500); 


res.render('error'); 


p; 


module.exports = app; 


The List .deleteOne({_id:id}) method is used to delete the document having 
this identifier in the collection. As we do not use a callback function in the List. 
deleteOne() method, we call the exec () method so that the deletion is performed in 
the database. 
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Also, notice the res. send () instruction at the end of the processing. It closes the 
connection between the browser and the server. If the connection is not closed, the 
browser waits for the server’s response, which would never come if the server sends 
nothing back to the browser. In this case, you would see unexpected results by clicking 
several times on the Delete buttons in the list and reloading the list. 


We have seen how to use MongoDB to insert, modify, and delete elements in a list, using 
a library such as Axios, allowing communication between the JavaScript code of the 
browser and the JavaScript code written for the server. And now, this brings us to the 
end of this chapter and the book. 


Summary 


Through this complete example, we have seen how to use JavaScript on both the client 
side (here, with Vue.js) and the server side (with Node.js and MongoDB). 


The use of a single language to carry out all development simplifies learning and ensures 
great consistency throughout the application. 


In addition, tools such as Vue.js, allowing the creation of reusable components, and 
modules such as Express and mongoose based on the MVC model, make it possible 
to properly architect JavaScript code, both on the client side and on the server side. 


We also saw how the Axios library made it possible to communicate between the client 
and the server. 


You now have everything you need to create reliable, robust, and well-structured client 
and server applications entirely in JavaScript. 


Thanks 


Thank you, dear reader, for purchasing and reading this book. It was written for the sole 
purpose of helping and guiding you. We hope it has been of great help to you. 


If so, we ask you for a very small but extremely important contribution - to make our 
book knownto others by means at your disposal, in the hope that it can keep helping 
people like you. Thanks very much! 
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